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 delay() 函数，但它根本不起作用，是否可以在带有计时器的 html5 音频中使用 pause() 代替?例如，pause('500',function(){});?

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 示例，演示如何处理和使用 ended mediaevent.在您的特定情况下，您将在 ended 事件处理程序中触发第二个音频文件的播放.

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.

您可以使用下面的代码或运行测试小提琴.

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.

标记:(注意在

元素之间故意避免空格 - 这是为了简化使用 nextSibling 遍历 DOM.)

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屋！