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

Posted 2023-02-25

【中文标题】如何像流畅的播放列表一样链接播放多个 HTML5 音频文件？

【英文标题】：How to chain playing of several HTML5 audio files like a smooth playlist?

【发布时间】：2014-05-30 01:36:38

【问题描述】：

允许访问有效的音频文件：

<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/

【参考方案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/

【讨论】：

优雅有效~