javascript - 如何像流畅的播放列表一样链接播放多个HTML5音频文件？

Question

获得对有效音频文件的访问权:

<audio src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Zh-Tianjin.ogg"></audio>
<audio src="https://upload.wikimedia.org/wikipedia/commons/8/8a/Zh-Beijing.ogg"></audio>
<audio src="https://upload.wikimedia.org/wikipedia/commons/7/73/Zh-Shanghai.ogg"></audio>
<audio src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Zh-Chengdu.ogg"></audio>

给定一个按钮:

<button id="play">Play me!</button>

鉴于我成功播放了一个音频

$('#play').on('click', function () {
    $("audio")[0].play();
});

如何将这几个音频一个接一个地链式播放？ -- 纯JS和JQuery，其他JS库也可以。

我的出发点是 this fiddle with basic tools

---

编辑: 我以前尝试过很多方法都没有成功，使用 .duration, window.setTimeout(function(){do_that}, time_ms) , .delay()在少数组合中没有成功。请参阅:http://jsfiddle.net/Ka2Nh/7/

Answer 1

您可以使用 ended event并触发下一个

var active = false;

$("audio").on("ended", function(){ 
    var audio = $(this).next("audio");
    if (audio.length) {
        audio.get(0).play();   
    } else {
        active = false;   
    }
});

$('#play').on('click', function () {    
    if (!active) {
        $("audio")[0].play();
        active = true;
    }
});

JSFiddle:http://jsfiddle.net/yMAs6/1/