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

Question

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

He intentado con la función jquery delay() pero no funciona en absoluto, ¿es posible usar pause() en audio html5 con temporizador? Por ejemplo, pause('500',function(){});?

Answer 1

Aquí hay una JSLinted, discreto Javascript ejemplo demostrando cómo manejar y utilizar el endedmediaevent. En su situación particular, activaría la reproducción del segundo archivo de audio en su controlador de eventos ended.

Puede usar el siguiente código o run the test fiddle.

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

marcado: (nótese la evasión deliberada de espacios en blanco entre <li> elementos - esto es simplificar recorrer el 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); 
    } 
});​ 


​ 

Answer 2

Creo que esta respuesta le ayudará a ...

html5 audio player - jquery toggle click play/pause?

lo que en lugar de un clic se debe utilizar un setTimeout, setInterval o una, que cada vez se siente más cómodo con el que comprobar constantemente para el .paused==false Creo que es posible que pueda verificar si se completa verificando la longitud de los videos y compararlos con la duración máxima, que == fin del archivo.

Answer 3

Si este es su etiqueta de audio :

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

y luego agregar un detector de eventos t o para el evento "finalizado" hará posible cambiar la fuente y reproducir tu próximo sonido.

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

Answer 4

Si utilizas Chrome se debe tener en cuenta que no s actualmente un error que no permite una etiqueta de audio para que se reproduzca. Para evitar esto puede restablecer el src o programáticamente solo crear un nuevo objeto Audio.