HTML5音频播放列表 - 如何在第一个结束后播放第二个音频文件？

Question

在另一个完成后，我们如何在html5中播放一些音频？

我试过用jquery delay()函数，但它不会工作，是否有可能在html5音频中使用pause()而不是定时器？例如，pause('500',function(){});？

Answer 1

这是JSLinted，不显眼的Javascript 示例演示如何处理和使用endedmediaevent。在您的特定情况下，您将触发ended事件处理程序中第二个音频文件的播放。

您可以使用下面的代码或run the test fiddle。

单击播放列表中的项目开始播放。一个音频结束后，下一个将开始。

标记：（注意空白的<li>元素之间的刻意回避 - 这是简化与nextSibling遍历DOM）。

<audio id="player"></audio> 

<ul id="playlist"><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%201%20by%20Lionel%20Allorge.ogg">Space 1</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%202%20by%20Lionel%20Allorge.ogg">Space 2</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%203%20by%20Lionel%20Allorge.ogg">Space Lab</li></ul> 

<button id="stop">Stop</button> 

脚本：

// globals 
var _player = document.getElementById("player"), 
    _playlist = document.getElementById("playlist"), 
    _stop = document.getElementById("stop"); 

// functions 
function playlistItemClick(clickedElement) { 
    var selected = _playlist.querySelector(".selected"); 
    if (selected) { 
     selected.classList.remove("selected"); 
    } 
    clickedElement.classList.add("selected"); 

    _player.src = clickedElement.getAttribute("data-ogg"); 
    _player.play(); 
} 

function playNext() { 
    var selected = _playlist.querySelector("li.selected"); 
    if (selected && selected.nextSibling) { 
     playlistItemClick(selected.nextSibling); 
    } 
} 

// event listeners 
_stop.addEventListener("click", function() { 
    _player.pause(); 
}); 
_player.addEventListener("ended", playNext); 
_playlist.addEventListener("click", function (e) { 
    if (e.target && e.target.nodeName === "LI") { 
     playlistItemClick(e.target); 
    } 
});​ 


​ 

Answer 2

我想这个答案将帮助你......

html5 audio player - jquery toggle click play/pause?

所以不是一个点击，你应该使用的setTimeout或setInterval的，它曾经你感觉更舒服，不断检查的.paused==false我想你可能能够通过检查视频的长度来检查它是否完成，并将其与最大长度（即文件结尾==）进行比较。

Answer 3

如果这是你的音频标签：

<audio id="player" src="someAudio.mp3"/> 

然后添加事件侦听器t o对于“结束”事件，可以改变声源并播放下一个声音。

var audio = document.getElementById("player"); 
audio.addEventListener("ended", function() { 
    audio.src = "nextAudio.mp3"; 
    audio.play(); 
}); 

Answer 4

如果您使用的是Chrome浏览器，您应该知道当前存在一个不允许重播音频标记的错误。为了解决这个问题，你可以重置src或者通过编程方式创建一个新的Audio对象。