<audio id="miaudio" controls="controls">
Tu navegador no soporta el elemento <code>audio</code>.
</audio>
<h2>Sonando...</h2>
<div id="texto"></div>
<h2>Canciones</h2>
<ul id="listado"></ul>
<script>
var reproductor = document.getElementById('miaudio');
function cargarCancion(numero){
// Cargamos la canción de forma dinámica
var texto = document.getElementById("texto");
texto.innerHTML = lista[numero][1];
var source= document.createElement('source');
source.src=lista[numero][0];
source.type='audio/ogg';
reproductor.appendChild(source);
reproductor.load();
reproductor.play();
}
function aleatorio() {
return Math.round(Math.random()*(lista.length-1));
}
/*function aleatorio() {
return Math.round(Math.random()*(lista.length-1));
}*/
var lista = [['1.mp3','Audio 1'],['2.mp3','Audio 2'],['3.mp3','Audio 3']];
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);
// lista.appendChild(item);// nuevo
}
cargarCancion(aleatorio());
reproductor.addEventListener('ended',
/* function refresh()
{
location.reload(true); la funcion de refresco si funciona si la habilito
}*/
function(){
//alert(+aleatorio); la alerta me devuelve valor NaN si la habilito
//"document.location.reload();"
cargarCancion(aleatorio()); // si realiza el cambio en la pista de audio del texto, paro siempre reproduce la misma
});
</script>
<br/><br/>
<hr>
</body>
</html>