JavaScript  »  Articoli  »  HTML5 e JavaScript 

Questa è la traduzione dell'articolo Unlocking the power of HTML5 <audio> di Giorgio Sardo pubblicato originariamente il 13 Maggio 2011 su IEBlog. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

I suoni sono il sottofondo della nostra vita quotidiana. Con l'elemento <audio> di HTML5 gli sviluppatori web possono oggi includere i suoni all'interno delle loro applicazioni. La flessibilità dell'elemento, assieme all'integrazione con la piattaforma esistente, apre le porte a diversi scenari: dall'aggiunta di semplici effetti sonori, all'inclusione di un sottofondo musicale nei giochi fino alla progettazione di più sofisticati sistemi audio.

Questo articolo analizza alcune delle migliori procedure per utilizzare il tag <audio> in applicazioni web e indica suggerimenti utili ricavati da siti web reali.

Aggiungere un elemento audio alla pagina

La prima cosa da imparare è come aggiungere un elemento audio ad una pagina. Si può fare includendo un tag <audio>, creando un'istanza di un nuovo elemento audio con JavaScript oppure includendo il flusso audio direttamente nella pagina.

<audio src="audio/sample.mp3" autoplay>
</audio>

Riproduci l'esempio

var audio = document.createElement("audio");
if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg"))
{
	audio.src = "audio/sample.mp3";
	audio.play();
}

Riproduci l'esempio

<audio src="data:audio/mpeg,ID3%02%00%00%00%00%..." autoplay>
</audio>

Riproduci l'esempio

Il primo approccio permette di inizializzare i componenti audio durante il caricamento della pagina. Il secondo ritarda il caricamento del file audio in un punto specifico del ciclo di vita dell'applicazione e offre, per questo, una maggiore flessibilità e una migliore gestione del flusso di dati. Il terzo esempio (quello che raccomandiamo di meno) consiste nell'includere i file audio nella pagina sotto forma di data-uri, cosa che riduce il numero delle richieste al server.

Si noti che un elemento audio generato attraverso JavaScript può essere riprodotto anche se non è stato aggiunto effettivamente alla struttura ad albero del DOM (come nel codice riportato sopra). Tuttavia, aggiungendo l'elemento audio alla pagina, si ottiene la visualizzazione della barra di controllo predefinita:

Figura 1: Controlli audio predefiniti

Sebbene non sarà un tema analizzato in questo articolo, è possibile includere più di un formato audio. Inoltre, se si ospitano i file audio sul proprio server, è necessario registrare l'oggetto MIME per i file mp3 ("audio/mpeg") nella configurazione del web server. Nella figura qui sotto si può vedere, e valga come esempio, l'impostazione in Internet Information Services (IIS).

Figura 2: HTML5 Audio Mime Type in IIS

Altri articoli

Altre guide

Altre newsletter