Gli audio sono elementi multimediali poco utilizzati nei siti web, di solito solo in quelli che trattano musica.
I tag degli audio
Per inserire un audio, si utilizza il tag <audio>. Come per i video, anche in questo caso si deve indicare la sorgente dell’audio, cioè dove si trova il file audio, e bisogna usare il tag <source>. Si aggiunge sempre l’attributo src con l’indirizzo del file audio, e type=”valore” che indica il file e la sua estensione.
<audio>
<source src="esempio.mp3" type="audio/mp3">
</audio>
Attenzione: le estensioni supportate sono .mp3 (audio/mpeg), .ogg (audio/ogg), .wav (audio/wav).
I controlli degli audio
Un importante attributo è controls in <audio> che, come nei video, permette all’utente di usare i controlli dell’audio che, ad esempio, servono per andare avanti e indietro.
<audio controls>
<source src="esempio.mp3" type="audio/mpeg">
</audio>
Mutare un audio
L’attributo muted in <audio> serve per mutare l'audio.
<audio muted>
<source src="esempio.mp3" type="audio/mpeg">
</audio>
Avviare automaticamente l’audio
Per avviare automaticamente l’audio, bisogna inserire l’attributo autoplay. Alcuni browser potrebbero bloccare questi audio se non contengono l'attributo muted.
<audio autoplay>
<source src="esempio.mp3" type="audio/mpeg">
</audio>
Ripetere gli audio automaticamente
Se vuoi che un audio si ripeta quando finisce, puoi usare l’attributo loop.
<audio loop>
<source src="esempio.mp3" type="audio/mpeg">
</audio>
Aggiungere più sorgenti in un audio
Nel caso in cui un audio non fosse disponibile, si possono inserire più sorgenti di altri audio, con <source>, uno sotto l’altro. Si può usare questo metodo per inserire due estensioni dello stesso audio. Sotto <source>, puoi indicare una scritta che viene visualizzata solo quando tutte le sorgenti contengono audio che non possono essere riprodotti.
<audio>
<source src="esempio.mp3" type="audio/mpeg">
<source src="esempio.ogg" type="audio/ogg">
Errore di riproduzione!
</audio>
Prossima lezione |