Tag HTML <audio>
Il tag HTML <audio> incorpora suoni come musica o stream audio. Scopri attributi, formati e la policy di autoplay con W3Docs.
Il tag <audio> è uno degli elementi HTML5 introdotti per consentire l'incorporamento di file audio in una pagina web. Riproduce musica, podcast, effetti sonori e qualsiasi altro stream audio tramite il player nativo del browser, eliminando la necessità di un plugin Flash o di un widget di terze parti.
Questa pagina illustra come incorporare l'audio, quali formati di file i browser supportano, gli attributi che controllano la riproduzione (controls, autoplay, loop, muted, preload), la policy di autoplay che crea confusione a quasi tutti, e come rendere l'audio accessibile.
Il tag <source> o l'attributo src puntano al file audio. Il percorso può essere un URL assoluto o relativo. Per il video, il tag strettamente correlato <video> funziona nello stesso modo.
Sintassi
Il tag <audio> è un elemento a coppia. È possibile impostare il file direttamente con src, oppure annidare uno o più elementi <source> tra i tag di apertura (<audio>) e chiusura (</audio>) affinché il browser possa scegliere un formato che supporta.
<audio>
<source src="URL" type="MIME-type">
<source src="URL" type="MIME-type">
</audio>Esempio del tag HTML <audio>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Formati audio supportati
Non tutti i browser sanno decodificare ogni codec, perciò l'audio HTML dispone di tre formati rilevanti nella pratica. La tabella seguente mostra l'estensione del file, il tipo MIME da inserire in type="" e il supporto generale:
| Formato | Tipo MIME | Supporto |
|---|---|---|
| MP3 | audio/mpeg | Supportato da tutti i browser moderni. La scelta più sicura. |
| WAV | audio/wav | Supportato ovunque, ma i file sono non compressi e molto pesanti. |
| OGG (Vorbis) | audio/ogg | Chrome, Firefox, Edge, Opera. Non Safari. |
| WebM | audio/webm | Chrome, Firefox, Edge, Opera. Non Safari. |
Poiché MP3 funziona ovunque, un singolo <source src="audio.mp3" type="audio/mpeg"> è di solito sufficiente. I formati aggiuntivi servono solo se si desidera un'alternativa royalty-free (OGG/WebM) o la massima qualità (WAV).
Come il browser sceglie un <source>
Quando si annidano più elementi <source>, il browser li scorre dall'alto verso il basso e riproduce il primo che riesce a decodificare — gli altri vengono ignorati. Inserire per primo il formato preferito o più efficiente. L'attributo type consente al browser di saltare i formati non supportati senza doverli scaricare, quindi è buona pratica includerlo sempre.
<audio controls>
<source src="audio.webm" type="audio/webm"> <!-- tried first -->
<source src="audio.ogg" type="audio/ogg"> <!-- fallback -->
<source src="audio.mp3" type="audio/mpeg"> <!-- universal fallback -->
</audio>L'attributo controls
Senza controls, l'elemento audio non visualizza nulla e l'utente non ha modo di avviarlo. L'attributo controls indica al browser di mostrare la propria interfaccia player nativa (play/pausa, barra temporale, volume):
<audio src="audio.mp3" controls></audio>Esempio del tag HTML <audio> con l'attributo controls
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>L'attributo loop
loop è un attributo boolean. Quando è presente, la traccia riparte dall'inizio ogni volta che termina — utile per musica d'ambiente in sottofondo o per un effetto sonoro ciclico:
<audio src="audio.mp3" controls loop></audio>Autoplay e l'attributo muted
Questa è la fonte di confusione più comune con l'audio HTML, quindi leggere con attenzione.
L'attributo autoplay chiede al browser di iniziare la riproduzione non appena il media è pronto, senza che l'utente prema play:
<audio src="audio.mp3" autoplay></audio>In pratica, i browser moderni bloccano l'autoplay con suono. Chrome, Safari e Firefox rifiutano di riprodurre automaticamente media con audio finché l'utente non ha interagito con la pagina (un clic, un tocco, una pressione di tasto). Questo protegge gli utenti da pagine web che emettono suoni in modo inatteso. Se si imposta autoplay su una traccia con audio, di solito rimarrà silenziosa e in pausa.
L'unico modo affidabile per far funzionare l'autoplay è impostare anche muted. Una traccia silenziata non produce alcun suono, quindi il browser ne consente l'avvio automatico:
<!-- Autoplays in modern browsers because it is muted -->
<audio src="audio.mp3" controls autoplay muted></audio>L'attributo muted semplicemente avvia l'elemento con il volume spento; l'utente può riattivare l'audio tramite i controlli. Per l'audio in particolare, una traccia in autoplay silenziata è raramente utile di per sé, ma vale la pena conoscere questo schema perché la stessa regola vale per il tag <video>, dove il muted autoplay è ampiamente diffuso.
Se si ha effettivamente bisogno che il suono parta, è preferibile attivare la riproduzione da un'azione dell'utente. L'HTML DOM JavaScript API permette di gestire l'elemento tramite metodi come .play() all'interno di un gestore di eventi click, che il browser considera approvato dall'utente.
L'attributo preload
preload è l'unico attributo di <audio> che accetta un valore anziché essere boolean. Suggerisce al browser quanta parte del file scaricare prima che l'utente prema play:
auto— il browser può scaricare l'intero file in anticipo. Usarlo quando si prevede che l'audio verrà riprodotto e si desidera una riproduzione immediata.metadata— scarica solo i metadati come la durata e i primi byte, non l'audio stesso. Un buon compromesso che consente ai controlli di mostrare la durata della traccia senza sprecare banda.none— non precaricare nulla finché l'utente non interagisce. Ideale quando la pagina contiene molte tracce, o quando la maggior parte dei visitatori non riprodurrà l'audio.
<audio src="audio.mp3" controls preload="metadata"></audio>preload è solo un suggerimento — un browser può ignorarlo per risparmiare dati, ed è sovrascritto da autoplay, che forza il caricamento del file.
Accessibilità
L'audio che esiste solo come suono esclude chiunque non possa ascoltarlo. Alcune aggiunte rendono l'audio incorporato inclusivo:
- Fornire una trascrizione testuale. Per audio con molto parlato (interviste, podcast), pubblicare il testo vicino al player in modo che gli utenti con screen reader e gli utenti non udenti ricevano gli stessi contenuti.
- Aggiungere sottotitoli con
<track>. Un elemento<track kind="captions">consente ai browser di visualizzare testo temporizzato per l'audio. - Etichettare il player con
aria-labelquando non è presente una didascalia visibile, in modo che le tecnologie assistive annuncino di cosa tratta la traccia. - Usare il testo di fallback tra i tag come degradazione elegante: i browser che non riescono a riprodurre l'elemento lo mostrano al suo posto.
<audio controls aria-label="Episode 12: Building accessible web audio">
<source src="podcast.mp3" type="audio/mpeg">
<track kind="captions" src="podcast.vtt" srclang="en" label="English">
Your browser does not support the audio element.
<a href="podcast.mp3">Download the audio</a> instead.
</audio>Attributi
Il tag <audio> dispone di attributi che indicano il percorso al file audio, il comportamento di riproduzione e altro ancora. Gli attributi controls, autoplay, loop e muted sono boolean; i loro valori possono essere omessi. Se specificati, la funzione corrispondente è abilitata per impostazione predefinita.
| Attributo | Valore | Definizione |
|---|---|---|
| autoplay | Riproduce automaticamente il file audio dopo il caricamento della pagina. | |
| controls | Visualizza il pannello di controllo (play/pausa, volume, ecc.). Se l'attributo controls è assente, l'audio non sarà visibile nella pagina. | |
| loop | Ripete il file audio in modo continuo dall'inizio dopo che è terminato. | |
| muted | Disattiva l'audio per impostazione predefinita. | |
| preload | auto, metadata, none | Definisce la strategia di precaricamento per il file audio. |
| src | URL | Specifica il percorso al file audio. |
Il tag <audio> supporta gli Attributi Globali e gli Attributi Evento.