Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » HTML5 e JavaScript

Pagine:

RSS Download

Liberare la potenza del tag audio di HTML5

di: Giorgo Sardo 03 Dicembre 2011

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>

Riproduci l'esempio

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

Riproduci l'esempio

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.

Pagina successiva

Pagine: