Problema con reproductor.addEventListener('ended'

[fab2160225]

Buenas, tengo un problema con esa función, tengo una pagina donde quiero reproducir unos archivos de audio,
El texto del audio a reproducir si cambia, sin embargo siempre reproduce el mismo archivo de audio


el código es el siguiente:

<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>

Espero alguien me pueda ayudar, utilizo crhome.
Gracias