Playlist audio HTML5 - come riprodurre un secondo file audio dopo che il primo è terminato?

Question

Come potremmo fare un po 'di audio in html5 suonare dopo che un altro è finito?

Ho provato con la funzione jquery delay() ma non funzionerà affatto, è possibile utilizzare pause() in html5 audio con timer invece? Ad esempio, pause('500',function(){});?

Answer 1

Ecco un JSLinted, discreto Javascript esempio dimostrando come gestire e utilizzare il endedmediaevent. Nella tua situazione particolare, attiveresti la riproduzione del secondo file audio nel tuo gestore di eventi ended.

È possibile utilizzare il codice sottostante o run the test fiddle.

Fare clic su un elemento nella playlist per avviare la riproduzione. Al termine di un audio, inizierà il prossimo.

markup: (si noti la prevenzione deliberata di spazio tra <li> elementi - questo è quello di semplificare attraversamento del DOM con 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); 
    } 
});​ 


​ 

Answer 2

penso che questa risposta vi aiuterà a ...

html5 audio player - jquery toggle click play/pause?

così invece di un clic è necessario utilizzare un setTimeout, o un setInterval, che mai si sente più a suo agio con per controllare costantemente la .paused==false Penso che potresti essere in grado di controllare se è finito controllando la lunghezza del video e confrontandolo con la lunghezza massima, che == alla fine del file.

Answer 3

Se questo è il tag audio :

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

quindi aggiungere un listener di eventi t o per l'evento "ended" sarà possibile cambiare la sorgente e riprodurre il tuo prossimo suono.

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

Answer 4

Se si utilizza Chrome, si dovrebbe essere consapevoli del fatto che al momento c'è un bug che non consente la riproduzione di un tag audio. Per aggirare questo è possibile reimpostare lo src o programmaticamente solo creare un nuovo oggetto Audio.