Πριν την δημοσίευση των Μαθημάτων HTML5, Μέρος 2ο

Η ετικέτα <audio>


Μια από τις ριζοσπαστικές αλλαγές που έφερε η HTML5 είναι ο τρόπος που προσθέτουμε βίντεο και audio στις σελίδες.

Μέχρι σήμερα, όπως στα βίντεο έτσι και στα 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 src="beach3.wav"></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>

Δοκίμασε το