Μια από τις ριζοσπαστικές αλλαγές που έφερε η HTML5 είναι ο τρόπος που προσθέτουμε βίντεο και audio στις σελίδες.
Μέχρι σήμερα, όπως στα βίντεο έτσι και στα audio, δεν υπήρχε στάνταρ τρόπος με τον οποίον τα προσθέταμε στις ιστοσελίδες, καθώς χρησιμοποιούνταν διαφορετικά plug-ins από τους χρήστες. Η HTML5 ορίζει συγκεκριμένο τρόπο για να προσθέτουμε audio στις σελίδες, χρησιμοποιώντας την ετικέτα <audio>
Προς το παρόν τρεις τύποι audio υποστηρίζονται από την HTML5:
- Ogg Vorbis
- MP3 και
- WAV
Μέχρι σήμερα, όπως στα βίντεο έτσι και στα audio, δεν υπήρχε στάνταρ τρόπος με τον οποίον τα προσθέταμε στις ιστοσελίδες, καθώς χρησιμοποιούνταν διαφορετικά plug-ins από τους χρήστες. Η HTML5 ορίζει συγκεκριμένο τρόπο για να προσθέτουμε audio στις σελίδες, χρησιμοποιώντας την ετικέτα <audio>
Προς το παρόν τρεις τύποι audio υποστηρίζονται από την HTML5:
- Ogg Vorbis
- MP3 και
- WAV
Ιδιότητες της ετικέτας <audio>
Ιδιότητα | Τιμή | Περιγραφή |
---|---|---|
autoplay (HTML5) | autoplay | η αναπαραγωγή του audio θα αρχίσει μόλις ολοκληρωθεί η φόρτωση του |
controls (HTML5) | controls | εμφανίζει τα κουμπιά ελέγχου στο audio, όπως το play, stop κτλ. |
loop (HTML5) | loop | η αναπαραγωγή του audio, κάθε φορά που τελειώνει, θα αρχίζει από την αρχή |
preload (HTML5) | preload | το audio θα φορτωθεί (load) όταν η σελίδα φορτωθεί. Αγνοείται όταν υπάρχει η ιδιότητα autoplay |
src (HTML5) | URL | Το URL του audio |
Παραδείγματα
Προσθήκη ενός audio το οποίο θα αρχίσει να παίζει όταν φορτωθεί
<audio src="/beach3.wav" autoplay="autoplay" controls="controls"></audio>
Προσθέτουμε audio με κουμπιά ελέγχου και άλλες ιδιότητες
<audio src="/beach3.wav" controls="controls" loop="loop"></audio>
Προσθήκη ενός audio το οποίο θα εμφανίζει τα κουμπιά ελέγχου και θα συνεχίζει να παίζει από την αρχή κάθε φορά που φτάνει στο τέλος
Η ετικέτα source
Η ετικέτα <source> προσθέσει πολλά media στην σειρά, είτε βίντεο, είτε audio. Έτσι όταν η αναπαραγωγή ενός media τελειώνει αρχίζει η αναπαραγωγή του επόμενου media. Η ετικέτα τοποθετείται μέσα στις ετικέτες <video> και <audio>:
Προσθήκη δύο audio στην σειρά
<audio controls="controls">
<source src="/beach3.wav" type="audio/wav" />
<source src="/beach2.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>
<source src="/beach3.wav" type="audio/wav" />
<source src="/beach2.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>