JavaScript  »  Articoli  »  HTML5 e JavaScript 

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.

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)
}

Riproduci l'esempio

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.

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]);
}

Riproduci l'esempio

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.

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.

Altri articoli

Altre guide

Altre newsletter