Prima di HTML5, ultima versione dello standard HTML che si è adattata in modo significativo alle esigenze del web moderno, includere un file audio in una pagina HTML richiedeva necessariamente l'utilizzo di un tag <object>. Sebbene questo tag rimanga tuttora utilizzato (non solo per includere file audio), HTML5 ha introdotto un nuovo tag <audio> pensato proprio per questa esigenza.
In questa lezione vedremo come utilizzare proprio il nuovo tag <audio> introdotto con HTML5. Per farlo, iniziamo con un semplice esempio:
<audio controls>
<source src="musica.mp3" type="audio/mp3">
</audio>
Il primo attributo è controls, e la sua presenza garantisce la presenza dei controlli utente per gestire la riproduzione del file audio. Omettere l'attributo controls ci permette, di fatto, di inserire un file audio in background, dal momento che la non visibilità dei controlli rende l'elemento audio invisibile all'utente. Quest'ultima funzionalità veniva implementata, in precedenza, tramite il tag <bgsound>, che tuttavia non è mai stato standardizzato, ed è quindi meglio evitare di utilizzarlo.
Altri due attributi possibili per il tag <audio> sono autoplay e loop: il primo forza l'audio ad essere eseguito automaticamente, mentre il secondo fa sì che esso venga automaticamente riprodotto a ciclo continuo.
All'interno del tag <audio> vi è poi un elemento di tipo <source>, mediante il quale possiamo specificare il file che ci interessa riprodurre. Nel precedente esempio, abbiamo specificato di riprodurre il file musica.mp3 tramite l'attributo src, con l'accortezza di esplicitare anche il tipo di file (type="audio/mp3").
Poichè alcuni tipi di file non sono supportati da tutti i browser, è possibile specificare diversi tag <source>. Ad esempio:
<audio controls>
<source src="musica.mp3" type="audio/mp3">
<source src="musica2.ogg" type="audio/ogg">
Il browser non supporta il tag audio
</audio>
In questo caso, il browser tenterà per prima cosa di riprodurre il file specificato nel primo tag <source>. Se (e solo se), per qualche motivo, il file non potesse essere riprodotto, il browser proverà a riprodurre il secondo file, e così via per tutti i tag <source> presenti. Per garantire, infine, la retrocompatibilità con le precedenti versioni di HTML, è possibile utilizzare una stringa (o dell'altro codice HTML) che verrà visualizzata nel caso in cui il browser non supporti il tag <audio>.
Ulteriori informazioni (inclusa la tabella del supporto sui browser) ed esempi pratici sono disponibili nella lezione dedicata all'audio della guida ad HTML5.