HTML5 offre la possibilità di inserire file sonori all’ interno dei nostri documenti grazie al nuovo tag <audio>.
Questo elemento offre la possibilità di inserire questi file nei seguenti formati: Mp3 , Wav ed Ogg.
Trattandosi di un tag relativamente “recente” , è interamente supportato dalle seguenti versioni di browsers in poi:
versione 4.0
versione 3.5
versione 4.0
versione 9.0
versione 10.5
Inoltre , non tutti i browsers sopracitati , supportano i 3 tipi di file che il tag <audio> riesce a gestire , di seguito un riassunto.
- supporta i seguenti formati : MP3 , WAV ,OGG
- supporta i seguenti formati : MP3 , WAV ,OGG
- supporta i seguenti formati : MP3 , WAV
- supporta i seguenti formati : MP3
- supporta i seguenti formati : MP3 , WAV ,OGG
Il tag <audio> , supporta le proprietà globali e gli eventi globali di HTML.
Sintassi di base
La sintassi di base per inserire un file audio in Html è la seguente:
<audio controls>
<source src=”nomecanzone.estensione” type=”audio/estensione”>
Frase da mostrare a video nel caso in cui il browser non supporti l’audio.
</audio>
Esempio
<!doctype html>
<html lang=”it”>
<body>
<audio controls>
<source src=”sweatdreams.mp3″ type=”audio/mp3″>
Your browser does not support the audio element.
</audio>
</body>
</html>
Con il codice sopra indicato, abbiamo inserito la canzone sweetdreams.mp3 (salvata nella stessa directory della pagina) , all’ interno di un documento HTML.
- <audio controls> : mostra i controlli di riproduzione (play , pausa , volume)
- <source src> : indica il nome del file da riprodurre
- <type> : indica il formato
- <audio controls> testo </audio>: mostra un testo nel caso in cui il formato dell’ audio non sia riconosciuto dal nostro browser.
AUTOPLAY (autoriproduzione)
Per far partire automaticamente il file audio , senza possibilità di avviarlo e stopparlo , si utilizza l’ attributo autoplay.
Autoplay così come mostrato nell’ esempio , riproduce la traccia una volta soltanto , senza mostrare i comandi di riproduzione.
E’ possibile mostrare i comandi di riproduzione modificando la linea <audio autoplay> in <audio autoplay controls>.
In questo caso , l’ audio partirà autonomamente , ma può essere fermato o riprodotto nuovamente dall’ utente.
LOOP (riproduzione continua )
Per fare in modo che la nostra traccia audio venga riprodotta continuamente al suo termine , utilizziamo l’ attributo loop.
Questo attributo può essere utilizzato in due modi:
- Con la possibilità di utilizzare i comandi <audio controls loop>
- Senza la possibilità di utilizzare i comandi <audio autoplay loop>
Modificando come segue il nostro codice HTML il file audio, partirà tramite comando manuale (e potrà essere stoppata in egual modo) , ma continuerà a ricominciare una volta terminata.
<!doctype html>
<html lang=”it”>
<body>
<audio controls loop>
<source src=”sweetdreams.mp3″ type=”audio/mp3″>
</audio>
</body>
</html>
Modificando come segue il nostro codice HTML il file audio partirà automaticamente e continuerà a riprodursi fino alla chiusura della pagina stessa.
<!doctype html>
<html lang=”it”>
<body>
<audio autoplay loop>
<source src=”sweetdreams.mp3″ type=”audio/mp3″>
</audio>
</body>
</html>