Πώς να προσθέσετε ήχο σε μια ιστοσελίδα HTML5

Το HTML5 διευκολύνει την προσθήκη του ήχου και της μουσικής στις ιστοσελίδες σας με το στοιχείο. Στην πραγματικότητα, το πιο δύσκολο πράγμα που πρέπει να κάνετε είναι να δημιουργήσετε τις πολλαπλές πηγές που χρειάζεστε για να βεβαιωθείτε ότι τα αρχεία ήχου σας παίζουν στην ευρύτερη ποικιλία browsers.

Το πλεονέκτημα της χρήσης του HTML5 είναι ότι μπορείτε να ενσωματώσετε τον ήχο χρησιμοποιώντας μόνο μερικές ετικέτες. Τα προγράμματα περιήγησης, λοιπόν, αναπαράγουν τον ήχο ακριβώς όπως θα εμφανίζονταν μια εικόνα όταν χρησιμοποιούσατε ένα στοιχείο IMG .

Πώς να προσθέσετε ήχο σε μια ιστοσελίδα HTML5

Θα χρειαστείτε έναν επεξεργαστή HTML , ένα αρχείο ήχου (κατά προτίμηση σε μορφή MP3) και έναν μετατροπέα αρχείων ήχου.

  1. Πρώτον, χρειάζεστε ένα αρχείο ήχου. Είναι καλύτερα να εγγράφετε το αρχείο ως MP3 ( .mp3 ), καθώς αυτό έχει υψηλή ποιότητα ήχου και υποστηρίζεται από τα περισσότερα προγράμματα περιήγησης (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ και Safari 5+).
  2. Μετατρέψτε το αρχείο σας σε μορφή Vorbis ( .ogg ) για να προσθέσετε υποστήριξη Firefox 3.6+ και Opera 10.5+. Μπορείτε να χρησιμοποιήσετε έναν μετατροπέα όπως αυτός που βρίσκεται στο Vorbis.com. Μπορείτε επίσης να μετατρέψετε το MP3 σε μορφή αρχείου WAV ( .wav ) για να λάβετε υποστήριξη από το Firefox και Opera. Σας συνιστώ να δημοσιεύσετε το αρχείο σας και στους τρεις τύπους, μόνο για ασφάλεια, αλλά το περισσότερο που χρειάζεστε είναι MP3 και ένας άλλος τύπος.
  3. Μεταφορτώστε όλα τα αρχεία ήχου στο διακομιστή ιστού σας και σημειώστε τον κατάλογο στον οποίο τα αποθηκεύσατε. Είναι καλή ιδέα να τα τοποθετήσετε σε έναν δευτερεύοντα κατάλογο μόνο για αρχεία ήχου, όπως οι περισσότεροι σχεδιαστές αποθηκεύουν εικόνες σε έναν κατάλογο εικόνων .
  4. Προσθέστε το στοιχείο AUDIO στο αρχείο HTML, όπου θέλετε να εμφανίζονται τα στοιχεία ελέγχου αρχείων ήχου. <έλεγχοι ήχου>
  5. Τοποθετήστε τα στοιχεία SOURCE για κάθε αρχείο ήχου που μεταφορτώνετε μέσα στο στοιχείο AUDIO :
    1. <πηγή src = "/ audio / sound.wav">
  1. Οποιαδήποτε HTML μέσα στο στοιχείο AUDIO θα χρησιμοποιηθεί ως εναλλακτική λύση για προγράμματα περιήγησης που δεν υποστηρίζουν το στοιχείο AUDIO . Προσθέστε λοιπόν κάποιο HTML. Ο ευκολότερος τρόπος είναι να προσθέσετε HTML για να μπορείτε να κάνετε λήψη του αρχείου, αλλά μπορείτε επίσης να χρησιμοποιήσετε μεθόδους ενσωμάτωσης HTML 4.01 για την αναπαραγωγή του ήχου. Εδώ είναι μια απλή εναλλακτική λύση:

    Το πρόγραμμα περιήγησης που χρησιμοποιείτε δεν υποστηρίζει αναπαραγωγή ήχου, κάντε λήψη του αρχείου:

    1. MP3 ,
    2. Vorbis , WAV
  2. Το τελευταίο πράγμα που πρέπει να κάνετε είναι να κλείσετε το στοιχείο AUDIO :
  3. Όταν τελειώσετε, η HTML σας θα πρέπει να είναι ως εξής: <έλεγχοι ήχου>
    1. Το πρόγραμμα περιήγησής σας δεν υποστηρίζει αναπαραγωγή ήχου, κάντε λήψη του αρχείου:

    2. MP3 ,
    3. Vorbis ,
    4. WAV

Πρόσθετες συμβουλές

  1. Βεβαιωθείτε ότι χρησιμοποιείτε το HTML5 doctype () για να επικυρώσετε την HTML σας
  2. Ελέγξτε τα διαθέσιμα χαρακτηριστικά του στοιχείου για να δείτε τι άλλες επιλογές μπορείτε να προσθέσετε στο στοιχείο σας.
  3. Σημειώστε ότι έχουμε ρυθμίσει το HTML ώστε να περιλαμβάνει τα στοιχεία ελέγχου από προεπιλογή και να έχει απενεργοποιήσει την αυτόματη αναπαραγωγή. Μπορείτε φυσικά να αλλάξετε αυτό, αλλά να θυμάστε ότι πολλοί άνθρωποι βρίσκουν ήχο που ξεκινάει αυτόματα / ότι δεν μπορούν να ελέγξουν να είναι ενοχλητικοί στην καλύτερη περίπτωση και συχνά θα αφήσουν τη σελίδα μόνο όταν συμβεί αυτό.