Gli audio sono elementi multimediali utilizzati per riprodurre suoni all'interno di una pagina web. Sebbene siano meno diffusi rispetto alle immagini e ai video, trovano largo impiego in siti dedicati alla musica, ai podcast, agli audiolibri, ai corsi online e nelle applicazioni web che utilizzano effetti sonori.
Per inserire un file audio in una pagina HTML si utilizza il tag <audio>. Al suo interno vengono inseriti uno o più tag <source>, che indicano i file audio disponibili.
Nel tag <source> si utilizza normalmente l'attributo src="valore", che specifica il percorso del file, e l'attributo type="valore", che permette al browser di riconoscere il formato del file.
<audio>
<source src="esempio.mp3" type="audio/mp3">
</audio>
I formati audio supportati dalla maggior parte dei browser sono:
audio/mpeg per i file con estensione .mp3.audio/ogg per i file con estensione .ogg.audio/wav per i file con estensione .wav.Tra questi, il formato MP3 è generalmente il più utilizzato grazie alla sua elevata compatibilità con browser e dispositivi.
L'attributo controls aggiunge i controlli standard del browser, consentendo all'utente di avviare o mettere in pausa la riproduzione, modificare il volume e spostarsi avanti o indietro nel file audio.
<audio controls>
<source src="esempio.mp3" type="audio/mpeg">
</audio>
L'attributo muted permette di riprodurre l'audio senza alcun suono.
<audio muted>
<source src="esempio.mp3" type="audio/mpeg">
</audio>
Per avviare automaticamente un audio quando la pagina viene caricata si utilizza l'attributo autoplay.
I browser moderni, tuttavia, limitano o bloccano spesso la riproduzione automatica degli audio con il volume attivo. Per questo motivo, quando è necessario utilizzare autoplay, è consigliabile abbinarlo anche all'attributo muted, così da aumentare la compatibilità tra i vari browser.
<audio autoplay>
<source src="esempio.mp3" type="audio/mpeg">
</audio>
Se desideri che un file audio venga riprodotto continuamente, puoi aggiungere l'attributo loop. Al termine della riproduzione, l'audio ricomincerà automaticamente dall'inizio.
<audio loop>
<source src="esempio.mp3" type="audio/mpeg">
</audio>
All'interno dello stesso tag <audio> è possibile inserire più tag <source>. Il browser proverà a riprodurre il primo file disponibile e, se non è compatibile oppure non può essere caricato, utilizzerà automaticamente quello successivo.
Questa tecnica è particolarmente utile per fornire lo stesso audio in formati differenti, aumentando la compatibilità con browser e dispositivi diversi.
È inoltre possibile inserire un messaggio di testo tra <audio> e </audio>. Questo testo verrà visualizzato solamente se nessuna delle sorgenti audio potrà essere riprodotta dal browser.
<audio>
<source src="esempio.mp3" type="audio/mpeg">
<source src="esempio.ogg" type="audio/ogg">
Errore di riproduzione!
</audio>