Estoy encontrándome el problema de que cuando termina el tema en reproducción de la lista, no se como puedo hacer para que recargue el siguiente tema (aleatorio) en el reproductor. Por lo general, cuando termina de reproducirse el tema entra siempre en bucle, solo logro que recargue mediante un document.location.reload(false); en esta parte:
cargarCancion(aleatorio());
reproductor.addEventListener("ended", function(){
//cargarCancion(aleatorio());
document.location.reload(false);
Agradezco cualquier ayuda ó idea. Muchas gracias!!!
<script>
var reproductor = document.getElementById("audio");
function cargarCancion(numero){
// Carga la canción de forma dinámica
var source= document.createElement('source');
source.src=lista[numero][0];
source.type="audio/mpeg";
reproductor.appendChild(source);
reproductor.load();
reproductor.play();
var titulo = document.getElementById("titulo");
titulo.innerHTML = lista[numero][1];
}
function aleatorio() {
return Math.round(Math.random()*(lista.length-1));
}
// Inicio listado
var lista = [["http://www.sonidosmp3gratis.com/sounds/008576979_prev.mp3","TEST UNO"],
["http://www.sonidosmp3gratis.com/sounds/short-circuit.mp3","TEST DOS"],
["http://www.sonidosmp3gratis.com/sounds/whistle-campana-whatsapp.mp3","TEST TRES"],
["http://www.sonidosmp3gratis.com/sounds/mario-bros%20vida.mp3","TEST CUATRO"],
["http://www.sonidosmp3gratis.com/sounds/messenger-tono-mensaje-.mp3","TEST CINCO"]];
// Fin listado
var listado = document.getElementById("listado");
for (x=0;x<lista.length;x++) {
var item = document.createElement("li");
item.innerHTML = lista[x][1];
listado.appendChild(item);
}
cargarCancion(aleatorio());
reproductor.addEventListener("ended", function(){
cargarCancion(aleatorio());
});
</script>
<audio id="audio"></audio>
<h3 id="sonando">Está sonando</h3>
<h1><div id="titulo"></div></h1>
<h2>Listado de temas:</h2>
<ul id="listado"></ul>