如何同時啓動多個音頻標籤？

Question

我有幾首歌曲，我想一起演奏，能夠將一些音樂靜音並演奏其他音樂。所以我需要能夠同時啓動它們。眼下，他們都開始稍微不同步：

// Start playing 
for (i = 0; i < 5; i++) { 
    tracks[i].audio.play(); 
} 

即使這顯然是不夠快的同時，開始了他們。

有沒有什麼方法可以保證HTML5音頻標籤能夠同時開始播放？

Answer 1

不知道您是否已經這樣做了，但下面是一些用於預加載音頻的示例代碼。

var audios = []; 
var loading = 0; 
AddNote("2C"); 
AddNote("2E"); 
AddNote("2G"); 
AddNote("3C"); 

function AddNote(name) { 
    loading++; 
    var audio = document.createElement("audio"); 
    audio.loop = true; 
    audio.addEventListener("canplaythrough", function() { 
     loading--; 
     if (loading == 0) // All files are preloaded 
      StartPlayingAll(); 
     }, false); 
    audio.src = "piano/" + name + ".mp3"; 
    audios.push(audio); 
} 

function StartPlayingAll() { 
    for (var i = 0; i < audios.length; i++) 
     audios[i].play(); 
    } 
} 

你可以試着在設置audio.currentTime位於每個軌道上的手動同步了音頻的另一件事。

Answer 2

您可以使用setTimeout在開始時短暫延遲後同步它們（您可能希望等待所有音頻對象加載）。

的jsfiddle：http://jsfiddle.net/bmAYb/35/

var au1 = document.getElementById('au1'); 
var au2 = document.getElementById('au2'); 
au1.volume = 1; 
au2.volume = 0; //mute 
au1.play(); 
au2.play(); 
var notfirstRun = false; 
//sync for the first time 
setTimeout(function() { 
    au2.currentTime = au1.currentTime; 
    au2.volume = 1; 
}, 250); 

我最初的想法是使用的setInterval每x毫秒同步，但是當你做音頻持久性有機污染物，如果volume設置爲1（聲音）。

我的小提琴並不完全同步，但它非常接近。您可以同步100％，但您需要將其他音軌上的音頻靜音或處理彈出。

代碼（和小提琴中的音樂）從Hungry Media。