JavaScript  »  Articoli  »  HTML5 e JavaScript 

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

Riproduci l'esempio

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.

Riproduci l'esempio

Altri articoli

Altre guide

Altre newsletter