HTML5 audio playlist - how to play a second audio

问题:

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

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(){});?

回答1:

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.

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>

script:

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


​

回答2:

If this is your audio tag:

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

then adding an event listener to it for the "ended" event will make it possible to change the source and play your next sound.

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

回答3:

If you're using chrome you should be aware that there s currently a bug which doesn't allow an audio tag to be replayed. To get around this you can reset the src or programmatically just create a new Audio object.

回答4:

I think this answer will help you ...

html5 audio player - jquery toggle click play/pause?

so instead of a click you should use a setTimeout, or a setInterval, which ever you feel more comfortable with to check constantly for the .paused==false I think you might be able to check if it is finished by checking videos's length and compare it with max length, which == end of file.