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符号必须是变量，而不是常量，否则无法将其值替换为新的音频元素。

这篇关于AJAX HTML5音频播放器无法在第二首曲目播放后加载下一首曲目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！