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 。