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

Question

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

自动加载新歌到HTML 5音频播放器当轨道结束使用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 player.php文件无法识别,是通过ajax加载。

Answer 1

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

• <source>标签应该自闭;
• <source>标签应该是<audio>标签的子标签
• <audio>标签不能有loop属性，否则ended事件永远不会被调用;你必须从player.php脚本中删除这个属性。

我想你已经从实际代码中删除了loop属性，否则它将无法在第一次工作。

现在，问题出现了，因为这一行:

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

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

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

编辑

所以你可以改变你的播放器。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符号必须是可变的，而不是恒定的，否则你不能用新的音频元素替换它的值。