Esta es una pregunta de seguimiento a esta publicación...
Gracias a las contribuciones de @Roko C. Buljan, pude usar el siguiente script para cargar una nueva pista en div#player. Cuando finaliza la pista, simulé un clic usando la función ajax loadurl que luego carga una nueva pista en div#player. Esto funciona bien y se supone que carga una nueva pista cuando finaliza y sigue y sigue, pero no funciona.
<script type="text/javascript"> const audio = document.querySelector('#myAudio'); audio.addEventListener("ended", () => { loadurl.call(this,'player.php?random=1','player'); }); </script>Creo que addEventListener no puede reconocer el archivo player.php que se está cargando a través de ajax.
Mirando el código que estabas usando, puedo ver muchos errores:
<source> debe cerrarse automáticamente;<source> debe ser un elemento secundario de la etiqueta <audio><audio> no debe tener el atributo de loop , o el evento ended nunca se llama; tienes que eliminar este atributo incluso del script player.php. Creo que ya ha eliminado el atributo de loop del código real; de lo contrario, no funcionará ni siquiera la primera vez.
Ahora, el problema ocurre debido a esta línea:
document.getElementById(targetID).innerHTML = XMLHttpRequestObject.responseText; porque está eliminando el objeto de audio actual y reemplazándolo por uno nuevo. Cuando la pista finaliza, genera el evento ended en el nuevo objeto de audio, que no tiene un controlador de eventos adjunto. El controlador de eventos que definió anteriormente ya no se llamará.
La forma correcta de hacer las cosas es no reemplazar el objeto de audio, sino simplemente reemplazar su atributo src con el nuevo nombre de la pista.
Editar
Entonces, podría cambiar su player.php para devolver el nombre del archivo y otros datos sin las etiquetas html, por ejemplo, en formato json:
$track = array('file'=>$file, 'image'=>$image); echo json_encode($track);y reemplace la línea anterior con:
var track = JSON.parse(XMLHttpRequestObject.responseText); audio.src = track.file; document.querySelector('#image').src = track.image; document.querySelector('#download').href = track.file; donde image y download son los ID de los elementos <img/> y <a>download</a> .
Otra opción es volver a vincular el evento ended cada vez que reemplaza el html, pero desaconsejo encarecidamente este enfoque. De todos modos, si eliges seguir este camino, debes hacerlo de esta manera:
function loadurl(dest, targetID) { ... document.getElementById(targetID).innerHTML = XMLHttpRequestObject.responseText; var audio = document.querySelector('#myAudio'); audio.addEventListener("ended", () => { loadurl.call(this,'player.php?random=1','player'); }); ... } var audio = document.querySelector('#myAudio'); audio.addEventListener("ended", () => { loadurl.call(this,'player.php?random=1','player'); }); Tenga en cuenta que el símbolo de audio debe ser variable, no constante; de lo contrario, no puede reemplazar su valor con el nuevo elemento de audio.