AJAX HTML5音频播放器无法在第二首曲目播放后加载下一首曲目

这是本帖子的后续问题...

Auto load new song into HTML 5 audio player when track ends using php/jquery

由于@Roko C.Buljan的贡献，我能够使用以下脚本将新曲目加载到div#播放器中。当曲目结束时，我使用AJAX函数loadurl模拟了一次点击，然后将一个新曲目加载到div#Player中。这播放得很好，它应该在结束时加载新的曲目，然后继续，但它不起作用。

<script type="text/javascript">

const audio = document.querySelector('#myAudio');

audio.addEventListener("ended", () => {

        loadurl.call(this,'player.php?random=1','player');

    }); 

</script>

我认为addEventListener无法识别通过AJAX加载的player.php文件。

---

解决方案

查看您使用的代码，我可以看到许多错误：

• <source>标记应自动关闭；
• <source>标记应该是<audio>标记的子级
• <audio>标记不能有loop属性，否则永远不会调用ended事件；即使从player.php脚本中也必须删除该属性。

我认为您已经从实际代码中删除了loop属性，否则即使是第一次它也无法工作。

现在，出现问题的原因是该行：

document.getElementById(targetID).innerHTML = XMLHttpRequestObject.responseText;

因为您要删除当前音频对象并将其替换为新对象。 当音轨结束时，它在没有附加事件处理程序的新音频对象上引发ended事件。将不再调用您先前定义的事件处理程序。

正确的做法是不替换音频对象，只需将其src属性替换为新的曲目名称。

编辑

因此您可以更改player.php以返回不带html标记的文件名和其他数据，例如json格式：

$track = array('file'=>$file, 'image'=>$image);
echo json_encode($track);

并将上一行替换为：

var track = JSON.parse(XMLHttpRequestObject.responseText);
audio.src = track.file;
document.querySelector('#image').src = track.image;
document.querySelector('#download').href = track.file;

其中image和download是<img/>和<a>download</a>元素的ID。

另一种选择是在每次替换html时重新绑定ended事件，但我强烈建议您使用这种方法。不管怎样，如果你选择走这条路，你必须这样做：

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');
});

请注意，audio符号必须是变量，而不是常量，否则无法将其值替换为新的音频元素。