Πώς να προσθέσετε ήχο σε μια ιστοσελίδα 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. Θέση

   ΠΗΓΗ στοιχεία για κάθε αρχείο ήχου που μεταφορτώνετε μέσα στο

   AUDIO στοιχείο:

6. 1. Οποιοδήποτε HTML μέσα στο

      AUDIO στοιχείο θα χρησιμοποιηθεί ως εναλλακτική λύση για προγράμματα περιήγησης που δεν υποστηρίζουν το

      AUDIO στοιχείο. Προσθέστε λοιπόν κάποιο HTML. Ο ευκολότερος τρόπος είναι να προσθέσετε HTML για να μπορείτε να κάνετε λήψη του αρχείου, αλλά μπορείτε επίσης να χρησιμοποιήσετε μεθόδους ενσωμάτωσης HTML 4.01 για την αναπαραγωγή του ήχου. Εδώ είναι ένα απλό fallback:

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

   2. Vorbis, WAV

7. Το τελευταίο πράγμα που πρέπει να κάνετε είναι να κλείσετε το στοιχείο AUDIO:

   1. Όταν τελειώσετε, η HTML σας θα πρέπει να φαίνεται ως εξής:

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

   5. MP3,

   6. Vorbis,

   7. WAV

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

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