HTML Audio

Υπάρχουν πολλές μεθόδους για την αναπαραγωγή ήχου στο HTML.

Πρόβλημα, πρόβλημα και λύση

Η αναπαραγωγή ήχου στο HTML δεν είναι εύκολη!

Χρειάζεστε να γνωρίζετε πολλά μυστικά για να διασφαλίσετε ότι τα αρχεία ήχου σας θα παίζονται σε όλους τους περιηγητές (Internet Explorer, Chrome, Firefox, Safari, Opera) και σε όλες τις συσκευές (PC, Mac, iPad, iPhone).

Σε αυτή την ενότητα, το CodeW3C.com σας συνοψίζει τα προβλήματα και τις λύσεις.

Χρήση προσθέτων

Το πρόσθετο του προγράμματος περιήγησης είναι ένα μικρό προγραμματιστικό πρόγραμμα που επεκτείνει τις λειτουργίες του προγράμματος περιήγησης.

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

Μπορείτε να χρησιμοποιήσετε τα ετικέτα <object> ή <embed> για να προσθέσετε πρόσθετα στη σελίδα HTML.

Αυτά τα ετικέτα ορίζουν θυρίδες περιεχομένου πόρων (συνήθως μη HTML) και, ανάλογα με τον τύπο τους, θα εμφανιστούν από το πρόγραμμα περιήγησης ή από εξωτερικό πρόσθετο.

Χρήση του στοιχείου <embed>

Το ετικέτα <embed> ορίζει θυρίδα περιεχομένου εξωτερικού (μη HTML) (είναι ένα ετικέτα HTML5, ανέκδοτο στο HTML4, αλλά λειτουργεί σε όλους τους προγράμματα περιήγησης).

Η παρακάτω κωδική ενότητα μπορεί να εμφανίσει το αρχείο MP3 που ενσωματώνεται στη σελίδα.

Παράδειγμα

<embed height="100" width="100" src="song.mp3" />

Δοκιμάστε το προσωπικά

Πρόβλημα:

  • Το ετικέτα <embed> είναι ανέκδοτο στο HTML 4. Η σελίδα σας δεν μπορεί να περάσει την επαλήθευση HTML 4.
  • Διαφορετικά προγράμματα περιήγησης υποστηρίζουν διαφορετικές μορφές αρχείων ήχου.
  • Αν το πρόγραμμα περιήγησης δεν υποστηρίζει τη μορφή αρχείου και δεν υπάρχει πρόσθετο, δεν μπορεί να παίξει τον ήχο.
  • Αν ο υπολογιστής του χρήστη δεν έχει εγκαταστήσει πρόσθετο, δεν μπορεί να παίξει τον ήχο.
  • Αν μετατρέψετε το αρχείο σε άλλη μορφή, δεν μπορεί να παίξει σε όλα τα προγράμματα περιήγησης.

Σημείωση:Χρησιμοποιήστε το <!DOCTYPE html> (HTML5) για να λύσετε προβλήματα επικύρωσης.

Χρήση του στοιχείου <object>

Το ετικέτα <object> μπορεί επίσης να ορίσει θυρίδα περιεχομένου εξωτερικού (μη HTML).

Η παρακάτω κωδική ενότητα μπορεί να εμφανίσει το αρχείο MP3 που ενσωματώνεται στη σελίδα.

Παράδειγμα

<object height="100" width="100" data="song.mp3"></object>

Δοκιμάστε το προσωπικά

Πρόβλημα:

  • Διαφορετικά προγράμματα περιήγησης υποστηρίζουν διαφορετικές μορφές αρχείων ήχου.
  • Αν το πρόγραμμα περιήγησης δεν υποστηρίζει τη μορφή αρχείου και δεν υπάρχει πρόσθετο, δεν μπορεί να παίξει τον ήχο.
  • Αν ο υπολογιστής του χρήστη δεν έχει εγκαταστήσει πρόσθετο, δεν μπορεί να παίξει τον ήχο.
  • Αν μετατρέψετε το αρχείο σε άλλη μορφή, δεν μπορεί να παίξει σε όλα τα προγράμματα περιήγησης.

Χρήση του στοιχείου HTML5 <audio>

Το στοιχείο <audio> είναι ένα στοιχείο HTML5, ανέκδοτο στο HTML 4, αλλά λειτουργεί σε όλους τους προγράμματα περιήγησης.

Παράδειγμα

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Το πρόγραμμα περιήγησής σας δεν υποστηρίζει αυτόν τον μορφή ήχου.
</audio>

Δοκιμάστε το προσωπικά

Το παραπάνω παράδειγμα χρησιμοποιεί ένα αρχείο mp3, οπότε λειτουργεί στο Internet Explorer, Chrome και Safari.

Για να λειτουργήσει αυτό το αρχείο ήχου και στα Firefox και Opera, προστέθηκε ένα αρχείο τύπου ogg. Αν αποτύχει, θα εμφανιστεί μήνυμα σφάλματος.

Πρόβλημα:

  • Το ετικέτα <audio> είναι ανέκδοτο στο HTML 4. Η σελίδα σας δεν μπορεί να περάσει την επαλήθευση HTML 4.
  • Πρέπει να μετατρέψετε το αρχείο ήχου σε διαφορετική μορφή.
  • Το στοιχείο <audio> δεν λειτουργεί σε παλιά προγράμματα περιήγησης.

Σημείωση:Χρησιμοποιήστε το <!DOCTYPE html> (HTML5) για να λύσετε προβλήματα επικύρωσης.

τα καλύτερα λύση HTML

Παράδειγμα

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Δοκιμάστε το προσωπικά

Οι παραπάνω παραδείγματα χρησιμοποιούν δύο διαφορετικές μορφές αρχείων ήχου. Το στοιχείο <audio> του HTML5 θα προσπαθήσει να αναπαράγει το ήχο με mp3 ή ogg. Αν αποτύχει, ο κώδικας θα ανακτήσει και θα προσπαθήσει με το στοιχείο <embed>.

Πρόβλημα:

  • Πρέπει να μετατρέψετε το ήχο σε διαφορετική μορφή.
  • Το στοιχείο <audio> δεν μπορεί να επικυρωθεί με HTML 4 και XHTML.
  • Το στοιχείο <embed> δεν μπορεί να επικυρωθεί με HTML 4 και XHTML.
  • Το στοιχείο <embed> δεν μπορεί να ανακτήσει για να εμφανίσει μηνύματα σφαλμάτων.

Σημείωση:Χρησιμοποιήστε το <!DOCTYPE html> (HTML5) για να λύσετε προβλήματα επικύρωσης.

Η πιο απλή μέθοδος για την προσθήκη ήχου σε έναν ιστότοπο;

Ποια είναι η πιο απλή μέθοδος για την προσθήκη ήχου σε μια ιστοσελίδα;

Ο player των μέσων της Yahoo είναι από τους καλύτερους.

Η χρήση του player της Yahoo είναι μια διαφορετική μέθοδος. Χρειάζεται απλώς να αφήσετε την Yahoo να κάνει τη δουλειά αναπαραγωγής των τραγουδιών.

Μπορεί να αναπαράγει αρχεία mp3 και μια σειρά από άλλες μορφές. Με μια απλή γραμμή κώδικα, μπορείτε να το προσθέσετε στη σελίδα σας, μετατρέποντας εύκολα μια σελίδα HTML σε επαγγελματική λίστα αναπαραγωγής.

Ο player της Yahoo

Παράδειγμα

<a href="song.mp3">Αναπαραγωγή Ήχου</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</script>

Δοκιμάστε το προσωπικά

Η χρήση του player της Yahoo είναι δωρεάν. Για να το χρησιμοποιήσετε, πρέπει να τοποθετήσετε αυτό το κείμενο JavaScript στο κάτω μέρος της σελίδας σας:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Όπως ακολουθεί, απλά συνδέστε το σύνδεσμο του αρχείου MP3 στο HTML σας, το JavaScript θα δημιουργήσει αυτόματα κουμπιά αναπαραγωγής για κάθε τραγούδι:

<a href="song1.mp3">Αναπαραγωγή Τραγουδιού 1</a>
<a href="song2.mp3">Αναπαραγωγή Τραγουδιού 2</a>
...
...
...

Ο.yahoo player παρέχει στους χρήστες σας έναν μικρό κουμπί αναπαραγωγής, όχι έναν πλήρη αναπαραγωγέα. Ωστόσο, όταν κάνετε κλικ στο κουμπί, εμφανίζεται ο πλήρης αναπαραγωγέας.

Παρακαλώ σημειώστε ότι ο παίκτης αυτός παραμένει πάντα στο κάτω μέρος του παραθύρου. Μόνο με ένα κλικ μπορείτε να τον μετακινήσετε έξω.

Χρήση Συνδέσμων

Αν η ιστοσελίδα περιέχει σύνδεσμοι για αρχεία μέσων, οι περισσότεροι περιηγητές θα χρησιμοποιήσουν το "επιπρόσθετο πρόγραμμα" για να παίξουν το αρχείο.

Ο παρακάτω κώδικας δείχνει έναν σύνδεσμο που δείχνει το αρχείο mp3. Αν ο χρήστης κάνει κλικ στον σύνδεσμο, ο περιηγητής θα ξεκινήσει το "επιπρόσθετο πρόγραμμα" για να παίξει το αρχείο:

Παράδειγμα

<a href="song.mp3">Play the sound</a>

Δοκιμάστε το προσωπικά

Ενσωματωμένος ήχος

Όταν περιλαμβάνετε ήχο στη σελίδα σας ή ως μέρος της σελίδας σας, αυτό ονομάζεται ενσωματωμένος ήχος.

Αν σκοπεύετε να χρησιμοποιήσετε ενσωματωμένους ήχους σε web εφαρμογές, πρέπει να είστε ενήμεροι ότι πολλοί χρήστες τα θεωρούν ενοχλητικά. Επίσης, παρακαλούμε σημειώστε ότι ο χρήστης μπορεί να έχει απενεργοποιήσει την επιλογή ενσωματωμένων ήχων στο πρόγραμμα περιήγησής τους.

Η καλύτερη συμβουλή μας είναι να περιλαμβάνετε τις ενσωματωμένες ήχους μόνο στις περιπτώσεις όπου ο χρήστης θέλει να τις ακούσει. Ένας θετικός παράδειγμα είναι όταν ο χρήστης χρειάζεται να ακούσει ένα ρεκόρμα και να κάνει κλικ σε έναν σύνδεσμο, θα ανοίξει η σελίδα και θα παίξει το ρεκόρμα.

Ετικέτες Μηχανικής Τεκμηρίωσης του HTML 4.01

Ετικέτα Περιγραφή
<applet> Δεν προτιμάται. Ορίζει το ενσωματωμένο applet.
<embed> Δεν προτιμάται στο HTML4, επιτρέπεται στο HTML5. Ορίζει το ενσωματωμένο αντικείμενο.
<object> Ορίζει το ενσωματωμένο αντικείμενο.
<param> Ορίζει τους παραμέτρους του αντικειμένου.

Ετικέτες Μηχανικής Τεκμηρίωσης του HTML 5

Ετικέτα Περιγραφή
<audio> Η ετικέτα ορίζει τον ήχο, όπως τη μουσική ή άλλες οπτικά ροές.
<embed> Η ετικέτα χρησιμοποιείται για να ορίσει το ενσωματωμένο περιεχόμενο, όπως το πρόγραμμα προσθήκης.