0

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>

1 respuesta 1

1

tu problema es que estas creando elemento source por cada llamada a cargarCancion() y siempre reproducira la primera:

puedes hacerlo asi:

<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>
<button onclick="cargarCancion(aleatorio())">click</button>

javascript:

var reproductor = document.getElementById("audio");

function cargarCancion(numero) {

    // Carga la canción de forma dinámica
    var source = reproductor;
    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

let listado = document.getElementById("listado");
for (let x of lista) {
    let item = document.createElement("li");
    item.innerHTML = x[1];
    listado.appendChild(item);
}

//cargarCancion(aleatorio());
reproductor.addEventListener("ended", function() {
    cargarCancion(aleatorio());
});
1
  • Simplemente perfecto!!! Muchas gracias, me has enseñado mucho!!! Commented el 3 may. 2019 a las 7:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.