HTML5的音频播放列表 - 如何发挥第二音频文件中的第一结束后？ [英] HTML5 audio playlist - how to play a second audio file after the first has ended?

问题描述

我们如何才能让HTML5中播放一些音频另一个结束后？

How could we make some audio in html5 play after another one has finished?

我试图用jQuery 延迟（）的功能，但它不会在所有的工作，是不是可以使用暂停（）在定时器，而不是HTML5音频？例如，暂停（'500'，函数（）{}）;

I have tried with jquery delay() function but it wont work at all, is it possible using pause() in html5 audio with timer instead ? For example, pause('500',function(){});?

推荐答案

下面是一个JSLinted，不显眼的Javascript 示例演示如何处理和使用结束 的MediaEvent 。在特定情况下，您会触发第二个音频文件的播放在结束事件处理程序。

Here's a JSLinted, unobtrusive Javascript example demonstrating how to handle and use the ended mediaevent. In your particular situation, you would trigger playback of the second audio file in your ended event handler.

您可以用code以下或运行测试小提琴。

You can use the code below or run the test fiddle.

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

Click an item in the playlist to begin playback. After one audio ends, the next will begin.

标记：（注意空格的℃之间的刻意回避;李＆GT; 元素 - 这是为了简化遍历与DOM nextSibling ）

markup: (note the deliberate avoidance of whitespace between <li> elements - this is to simplify traversing the DOM with nextSibling.)

<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);
    }
});​


​

这篇关于HTML5的音频播放列表 - 如何发挥第二音频文件中的第一结束后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！