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的数组。数组开头的元素可能已经结束，而最后的元素可能仍在播放。音频元素开始播放时，会从开头移动到结尾。这是按下播放时执行的代码：

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。

HTML5音频元素停止播放

1 个答案: