如何像流畅的播放列表一样链接播放多个 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/