Ήχος του HTML

Υπάρχουν πολλά τρόποι για να παίξετε ήχο στο 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" />

Προσπαθήστε το προσωπικά

Question:

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

Note:Use <!DOCTYPE html> (HTML5) to solve validation issues.

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

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

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

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Question:

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

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

Το στοιχείο <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. Αν αποτύχει, θα εμφανιστεί μήνυμα σφάλματος.

Question:

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

Note:Use <!DOCTYPE html> (HTML5) to solve validation issues.

Καλύτερη λύση 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>

Προσπαθήστε το προσωπικά

The above example uses two different audio formats. The HTML5 <audio> element will try to play audio with mp3 or ogg. If it fails, the code will fallback to try the <embed> element.

Question:

  • You must convert the audio to a different format.
  • The <audio> element cannot pass HTML 4 and XHTML validation.
  • The <embed> element cannot pass HTML 4 and XHTML validation.
  • The <embed> element cannot fallback to display error messages.

Note:Use <!DOCTYPE html> (HTML5) to solve validation issues.

The simplest way to add audio to a website

What is the simplest way to add audio to a webpage?

Yahoo's media player is definitely one of them.

Using the Yahoo Media Player is a different approach. You just need to let Yahoo handle the song playback.

It can play mp3 and a series of other formats. With a simple line of code, you can add it to your webpage, easily transforming an HTML page into a professional playlist.

Yahoo Media Player

Παράδειγμα

<a href="song.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

Προσπαθήστε το προσωπικά

Using the Yahoo player is free. To use it, you need to insert this JavaScript at the bottom of the webpage:

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

Then simply link the MP3 file to your HTML, and JavaScript will automatically create a play button for each song:

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

The Yahoo Media Player provides your users with a small play button, not a full player. However, when you click the button, a full player will pop up.

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

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

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

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

Παράδειγμα

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

Προσπαθήστε το προσωπικά

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

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

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

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

Ετικέτες Μέσων του HTML 4.01

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

Ετικέτες Μέσων του HTML 5

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