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

2022-04-19 00:00:00 audio jquery javascript ajax html5-audio

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

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;

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

相关文章