HTML5音頻元素停止播放

Question

我想使用一個HTML5音頻元素，使其具有多個“通道”。 通常，使用一個簡單的音頻標簽，如果我按一次播放按鈕，它將播放； 但是，如果在音頻仍在播放時再次按播放，它將不會再次播放。 本質上，除非所有通道都在播放，否則我希望相同的聲音能夠同時再次播放。

為此，我正在加載許多音頻標簽。 這是我的加載音頻文件的代碼：

function loadAllAudios(number) {
    toLoad = number;
    loaded = 0;
    audios = [];
    for (var i = 0; i < number; ++i) {
        // Random test audio file here
        loadAudio("http://www.w3schools.com/html/horse."); // Leave off extension
    }
}

而loadAudio函數如下：

function loadAudio(source) {
    var aud = document.createElement("audio");
    aud.addEventListener("canplaythrough", function() {
        ++loaded;
    });
    aud.src = source + (aud.canPlayType("ogg") ? "ogg" : "mp3");
    audios.push(aud);
};

為了跟蹤播放哪個音頻元素，我有一個名為audios的數組。 數組開頭的元素可能已經結束，而結尾的元素可能仍在播放。 當音頻元素開始播放時，它會從頭到尾移動。 這是當您按下play時執行的代碼：

console.log(audios);
// Make sure everything is loaded, and that audios isn't an empty array
if (loaded === toLoad && audios && audios.length) {
    var curAudio = audios[0];
    curAudio.play();
    // Move the first element to the end of the array
    // so that we don't play it again while it is still playing
    audios.push(audios.shift());
}

jsfiddle在這里： http ： //jsfiddle.net/prankol57/XgRH4/1/

我的問題是，例如，如果我加載了三個聲道，則在單擊播放4次后，即使所有音頻都已結束，代碼也會停止工作。 我以為該元素可能沒有正確移動到最后，但是console.log顯示所有音頻元素仍然存在。

編輯 ：在我測試過的瀏覽器（Chrome，Firefox和Internet Explorer 11）中，該代碼僅在Internet Explorer 11中有效。

Answer 1

canplaythrough事件將為單個文件觸發多次，從而導致意外的++loaded （即使文件已經加載），因此loaded === toLoad條件將返回false 。