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.
Inclusione del tag <audio>
<audio src="audio/sample.mp3" autoplay>
</audio>Elemento audio istanziato con JavaScript
var audio = document.createElement("audio");
if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg"))
{
audio.src = "audio/sample.mp3";
audio.play();
}Inclusione del flusso audio
<audio src="data:audio/mpeg,ID3%02%00%00%00%00%..." autoplay>
</audio>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:
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).
Precaricare l'audio prima della riproduzione
Una volta generato l'elemento audio si deve definire la strategia di precaricamento. Le specifiche HTML5 per l'elemento <audio> definiscono tre valori per la proprietà preload:
none: indica allo user agent che l'autore non si aspetta che l'utente abbia bisogno della risorsa multimediale o che il web server ha bisogno di minimizzare il traffico non necessario.
Ipotizzando, come scenario di utilizzo, un blog di podcast con un file audio per ogni post, questa opzione si rivela particolarmente utile perché riduce la banda necessaria al caricamento iniziale. Una volta che l'utente, attraverso i controlli predefiniti o con i metodi JavaScriptload()eplay(), avvia la riproduzione del file, il browser comincerà a scaricare il flusso audio.metadata: indica allo user agent che l'autore non si aspetta che l'utente abbia bisogno della risorsa multimediale, ma che è accettabile che vengano scaricati i metadati della risorsa (dimensioni, durata ecc.).
L'opzione è raccomandata se si sta progettando un player audio e si ha necessità di ricavare le informazioni di base del file, ma senza avviare la riproduzione.auto: indica allo user agent di considerare, senza rischio per il server, prima le esigenze dell'utente, fino a scaricare l'intera risorsa.
Questo approccio è probabilmente il migliore se si sta progettando un gioco poiché permette, prima di avviare il gioco stesso, di caricare tutti i file audio.
Si noti che se si imposta la proprietà src dell'elemento audio attraverso istruzioni programmate, il browser imposterà la proprietà preload, se non altrimenti specificato, ad auto. Per questo motivo, se lo scenario d'uso implica l'utilizzo di un valore differente, bisogna essere sicuri di specificarlo nel codice prima di impostare il tag src.
Si può analizzare l'impatto sulla rete di queste tre opzioni visualizzando la pagina di esempio e usando i Developer Tools F12 (scheda Rete) di Internet Explorer. Per finalità di debug si possono simulare le nuove chiamate e disabilitare la cache locale spuntando la voce Aggiorna sempre dal server dal menu Cache.
Ecco il comportamento della rete nei casi indicati:
Figura 4: Rete con preload=none
(clic per ingrandire)
Figura 5: Rete con preload=metadata
(clic per ingrandire)
Figura 6: Rete con preload=auto
(clic per ingrandire)
La proprietà preload è utile per la fase di inizializzazione, ma è necessario sapere quando il browser ha effettivamente terminato di caricare la risorsa ed è pronto a riprodurla. Si può ottenere questa informazione intercettando l'evento canplaythrough. Questo evento è chiamato dallo user agent quando valuta che, avviata la riproduzione, il file multimediale potrebbe essere riprodotto alla stessa velocità fino alla fine, senza doversi fermare per riempire di nuovo il buffer.
var audio = document.createElement("audio");
audio.src = "audio/sample.mp3";
udio.addEventListener("canplaythrough", function () {
alert('The file is loaded and ready to play!');
}, false);Loop
Un'altra modalità d'uso che viene di solito utilizzata con elementi audio è la possibilità di riprodurre un file in loop. Con il tag HTML5 <audio> è possibile ottenere questa modalità usando la proprietà loop mediante la quale il file verrà riprodotto all'infinito oppure fino a quando l'applicazione attiva il controllo audio pause().
<audio src="audio/sample.mp3" autoplay loop>
</audio>Un altro approccio per riprodurre in loop un clip audio è di eseguire una chiamata al metodo play() alla fine del file. In questo modo, inoltre, è possibile aggiungere del ritardo fra un loop e un altro.
var audio = document.createElement("audio");
audio.src = "piano/3C.mp3";
audio.addEventListener('ended', function () {
// Attendi 500 millisecondi prima del prossimo loop
setTimeout(function () { audio.play(); }, 500);
}, false);
audio.play();Si noti che ogni chiamata al metodo play() durante la riproduzione del file non avrà alcun effetto. Se si fosse interessati a terminare e riavviare la riproduzione di un file audio sarà necessario resettare il currentTime.
var audio = null;
audio = document.createElement("audio");
audio.src = "piano/3C.mp3";
audio.addEventListener('ended', function () {
audio.play();
}, false);
function play() {
audio.play();
}
function restart() {
audio.currentTime = 0;
audio.play();
}Tag audio multipli
Se lo scenario di utilizzo prevede che un singolo file audio venga riprodotto diverse volte nello stesso momento (con i suoni che si sovrappongono) si possono creare tag audio multipli che puntano allo stesso file. Ovviamente lo stesso approccio funziona se si utilizzano file audio diversi. Come abbiamo spiegato poco sopra, si possono aggiungere file audio usando istruzioni programmate oppure instanziandoli all'interno del markup.
Il codice che mostriamo qui sotto mostra come caricare e riprodurre file audio multipli usando semplice markup. Tutti i file audio di esempio hanno la stessa lunghezza e, al termine dell'esecuzione, saranno riprodotti nuovamente dall'inizio. Se li riproducete in Internet Explorer 9, si può notare che i suoni saranno sincronizzati nei vari loop. Noterete, inoltre, che la combinazione di questi cinque suoni darà vita allo stesso file audio utilizzato nell'esempio precedente (sample.mp3).
<body>
<audio src="audio/Bass.mp3" autoplay loop>
</audio>
<audio src="audio/Drum.mp3" autoplay loop>
</audio>
<audio src="audio/Crunch.mp3" autoplay loop>
</audio>
<audio src="audio/Guitar.mp3" autoplay loop>
</audio>
<audio src="audio/Pizzicato.mp3" autoplay loop>
</audio>
</body>Sebbene questo approccio sia semplice e lineare, in molti scenari d'uso gli sviluppatori preferiscono creare i file audio attraverso istruzioni programmate. Il seguente codice mostra come aggiungere tre file audio dinamicamente. Se riprodotti insieme riprodurranno un Do maggiore!
AddNote("3C");
AddNote("3E");
AddNote("3G");
function AddNote(name) {
var audio = document.createElement("audio");
audio.src = "piano/" + name + ".mp3";
audio.autoplay = true;
}Il codice funziona in ogni browser e permette di progettare scenari d'uso coinvolgenti.
È importante tenere a mente che, a mano a mano che l'applicazione o il gioco diventa più complesso, è possibile che si raggiungano due limiti: il numero di elementi audio che è possibile precaricare nella stessa pagina e il numero degli elementi audio che possono essere riprodotti contemporaneamente.
Questo numero dipende dal browser e dalla potenza del Pc. Basandomi sulla mia esperienza, Internet Explorer 9 può gestire decine di elementi audio simultaneamente senza problemi. Altri browser non si comportano allo stesso modo e si potrebbero incontrare evidenti ritardi e distorsioni quando si riproducono file multipli in loop.
Strategie di sincronizzazione
A seconda delle caratteristiche della rete è sempre necessario considerare i ritardi che possono incorrere tra l'aggiunta del tag, il caricamento della risorsa e la sua riproduzione. In particolare, quando si gestiscono file multipli ogni file potrebbe essere pronto per essere riprodotto prima o dopo. Nella figura qui sotto, ad esempio, è visualizzata l'analisi di riproduzione dei tre file usati poco sopra, ma caricati dal localhost.
Figura 7: Sincronizzazione Audio
(clic per ingrandire)
Come si può notare dalla colonna Timings, file differenti possono essere pronti in momenti differenti.
Una comune tecnica di sincronizzazione è quella di precaricare i file all'inizio. Una volta che sono pronti, è possibile usare un loop di iterazione per cominciare a riprodurli.
var audios = [];
var loading = 0;
AddNote("2C");
AddNote("2E");
AddNote("2G");
AddNote("3C");
AddNote("3E");
AddNote("3G");
AddNote("4C");
function AddNote(name) {
loading++;
var audio = document.createElement("audio");
audio.loop = true;
audio.addEventListener("canplaythrough", function () {
loading--;
if (loading == 0) // Tutti i file sono precaricati
StartPlayingAll();
}, false);
audio.src = "piano/" + name + ".mp3";
audios.push(audio);
}
function StartPlayingAll() {
for (var i = 0; i < audios.length; i++)
audios[i].play();
}Bene, mettiamo tutto insieme. Il prossimo esempio simula un pianoforte che riproduce il motivo Frère Jacques (conosciuto anche come Brother John, Brother Peter o Fra' Martino). La pagina comincia con il recuperare ogni nota, mostrando il progresso di caricamento nel client. Una volta che i file sono pronti, parte la canzone e continua ed essere riprodotta in loop.
L'audio in siti web reali
Dopo aver analizzato i modelli di gestione più comuni per i file audio multipli, vorrei mostrare alcuni siti Web che rappresentano esempi di buone pratiche d'uso del tag <audio>.
Pirates Love Daises
In un post di qualche tempo fa ho parlato di Pirates Love Daises, un bellissimo gioco in HTML5 progettato da Grant Skinner. Assieme ad una eccellente logica di gioco e ad avvincenti effetti visuali, il team di Grant ha sviluppato una sofisticata libreria audio utilizza per riprodurre diversi clip all'interno del gioco. La logica principale della libreria è inclusa nella classe AudioManager. Come suggerito poco sopra, prima di avviare il gioco il sito precarica tutti i clip audio mostrando l'avanzamento nella schermata di caricamento iniziale. Il sito gestisce anche eventuali timeout della connessione ed errori che possono incorrere durante il caricamento di un file.
Figura 8: Pirates Love Daisies
(clic per ingrandire)
addAudioChannel:function(b,a,f){
var h=document.createElement("audio");
if(f!=true){
this.currAsset=h;
this.timeoutId=setTimeout($.proxy(this,"handleAudioTimeout"),e.AUDIO_TIMEOUT);
h.addEventListener("canplaythrough",$.proxy(this,"handleAudioComplete"),false);
h.addEventListener("error",$.proxy(this,"handleAudioError"),false)
}
h.setAttribute("id",a);
h.setAttribute("preload","auto");
$("<source>").attr("src",b).appendTo(h);
$("<source>").attr("src",b.split(".mp3")[0]+".ogg").appendTo(h);
document.body.appendChild(h)
}
,handleAudioComplete:function(b){
if(LoadedAssets.getAsset(b.target.id)!=true){
LoadedAssets.addAsset(b.target.id,true);
clearTimeout(this.timeoutId);
this.calculatePercentLoaded(true)
}
}
,handleAudioError:function(b){
trace("Error Loading Audio:",b.target.id);
LoadedAssets.addAsset(b.target.id,true);
clearTimeout(this.timeoutId);
this.calculatePercentLoaded(true)
}
,handleAudioTimeout:function(){
trace("Audio Timed Out:",this.currAsset.id);
LoadedAssets.addAsset(this.currAsset.id,true);
this.calculatePercentLoaded(true)
}Great sta lavorando ad un progetto di "Sound Library" che permetterà agli sviluppatori di usare la logica della libreria in qualsiasi altra applicazione. Non vediamo l'ora di vederla!
Firework (di Mike Tompkins)
La demo di Firework è particolarmente interessante. Permette di interagire con diverse tracce audio allo stesso tempo cambiando dinamicamente il volume di ognuna di esse. Inoltre, interagendo con i diversi canali audio, l'interfaccia reagisce dinamicamente alle diverse impostazioni o azioni dell'utente.
Figura 9: Firework
(clic per ingrandire)
In questo caso i tag audio sono stati indicati nel markup HTML (sono solo sei tracce). L'avanzamento è tracciato intercettando l'evento canplaythrough. Una volta che tutti i file sono pronti per essere riprodotti, attraverso un loop si scorre la lista e si avvia la riproduzione.
video.addEventListener('canplaythrough', onCanPlayAudio, false);
for (var i = 0; i < 5; i++) {
var aud = document.getElementById("aud" + i);
targetVolumes.push(0);
aud.volume = 0;
audioTags.push({
"tag": aud,
"ready": false
});
aud.addEventListener('canplaythrough', onCanPlayAudio, false);
}
// Imposta le tracce audio/video
document.getElementById("tompkins").src = MediaHelper.GetVideoUrl("Firework_3");
for (var i = 0; i < audioTracks.length; i++) {
document.getElementById("aud" + i).src = MediaHelper.GetAudioUrl(audioTracks[i]);
}Gli sviluppatori in questo caso hanno anche scelto di impostare inizialmente il volume ad un livello 0 per poi aumentarlo dinamicamente a 1 non appena l'applicazione è pronta ad essere eseguita. In dipendenza dalla qualità della scheda audio e dei driver, questo trucchetto riduce la probabilità di ascoltare un "colpo" quando l'audio inizia ad essere riprodotto.
BeatKeep
L'ultimo scenario è probabilmente il più complesso di quelli mostrati sinora. Nell'esempio è possibile progettare le proprie canzoni usando una "beat machine" e riproducendo diversi clip audio in loop. In questa applicazione diventa critica la perfetta sincronizzazione dei canali audio e un sistema agile di buffering per caricare clip multiple.
Figura 10: BeatKeep
(clic per ingrandire)
La beat machine permette di controllare completamente tempo e battuta e, grazia all'uso sofisticato di logica di timing e modelli di associazione, il risultato finale è una fluida esperienza utente.
Conclusioni
Vi incoraggio ad usare tutti gli esempi e le applicazioni descritte in questo articolo usando Internet Explorer 9 o altri browser e a farci conoscere i vostri giudizi sull'esperienza utente. Potete scaricare tutti gli esempi e i codici usanti dal link in alto a questo articolo o direttamente dal nostro archivio.
Se desiderate avere maggiori informazioni sui controlli audio e video, vi suggerisco di guardare il video 5 Things You Need To Know To Start Using <audio> and <video> Today o leggere gli interessanti articoli comparsi su MSDN.
Ringrazio DoubleDominant per i clip audio utilizzati in questo articolo e Grant Skinner e Archetype per le loro creazioni in HTML5.
L'autore
Giorgio Sardo è senior Technical Evangelist di Microsoft con competenze specifiche su HTML5 e Internet Explorer. Ama lavorare assieme alle community, portare all'estremo i limiti della tecnologia e risolvere i problemi più complessi. Nel 2006 ha vinto la Imagine Cup grazie ad un futuristico progetto; un anno più tardi è stato nominato Best Consultant of the Year dalla British Computer Society. Nel 2009 Giorgio si è trasferito presso il quartier generale di Microsoft a Redmond per concentrarsi sul futuro del Web. Giorgio è uno speaker popolare in tutto il mondo e negli ultimi cinque anni ha presenziato a diverse conferenze riguardanti HTML5, il Web e le piattaforme mobile. È la mente che sta dietro a molte delle belle applicazioni e dei giochi che si possono trovare su www.beautyoftheweb.com.
