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

Question

这是这篇文章的后续问题......

使用 php/jquery 在曲目结束时自动将新歌曲加载到 HTML 5 音频播放器中

感谢@Roko C. Buljan 的贡献，我能够使用以下脚本将新曲目加载到 div#player 中。 当曲目结束时，我使用 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 文件。

Answer 1

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

• <source>标签应该自动关闭；
• <source>标签应该是<audio>标签的子标签
• tha <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符号必须是可变的，而不是常量，否则您无法将其值替换为新的音频元素。