Lista de reproducción de audio HTML5: ¿cómo reproducir un segundo file de audio después de que termine el primero?

¿Cómo podríamos reproducir audio en html5 después de que otro haya terminado?

He intentado con la function jquery delay() pero no funcionará, ¿es posible usar pause() en audio html5 con timer? Por ejemplo, pause('500',function(){}); ?

Aquí hay un ejemplo de Javascript JSLinted, discreto, que demuestra cómo manejar y usar el evento medio ended . En su situación particular, activaría la reproducción del segundo file de audio en su manejador de evento ended .

Puede usar el siguiente código o ejecutar el violín de testing .

Haga clic en un elemento en la list de reproducción para comenzar la reproducción. Después de que termina un audio, comenzará el siguiente.

marcado: (nótese la evitación deliberada de espacios en blanco entre elementos <li> ; esto es para simplificar el recorrido 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> 

guión:

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

Si esta es tu label de audio:

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

luego agregarle un detector de events para el evento "finalizado" hará posible cambiar la fuente y reproducir su próximo sonido.

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

Si usa Chrome, debe tener en count que actualmente hay un error que no permite que se reproduzca una label de audio. Para evitar esto puede restablecer el src o programáticamente solo crear un nuevo object de Audio .

Creo que esta respuesta te ayudará …

reproductor de audio html5 – jquery alternar click reproducir / pausa?

así que, en lugar de un clic, debes usar un setTimeout o un setInterval, con el que te sientas más cómodo para verificar constantemente si .paused==false Creo que podrías verificar si se terminó verificando la duración de los videos y comparando con longitud máxima, que == fin del file.