我有一个webapp https://radio.repjesus.com当您使用 ajax/jquery 单击链接时加载并播放音轨。一切正常，但当曲目结束时，曲目将设置为循环，并且这种情况可以永远持续下去。我希望播放器从数据库中自动加载随机曲目并在一首曲目结束时播放。音频是这样设置的。
<div id="player"><audio title="Audio title" controls loop autoplay controlsList="nodownload" preload="auto" id="myAudio" /><source src="audio.mp3" type="audio/mp3" id="audioID"></div>
当您单击它时，我使用 jquery 将新曲目加载到 #player div 中。例如;
<a href="javascript:;" onClick="loadurl('player.php?play=audioID','player')">Track One</a>
<script type="text/javascript">
<!-- ajaxified -->
function loadurl(dest, targetID) {
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHttp");
}
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", dest);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
document.getElementById(targetID).innerHTML =
XMLHttpRequestObject.responseText;
delete XMLHttpRequestObject;
XMLHttpRequestObject = null;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
在我的player.php 文件中，我有；
<?php
.... fetch track from db where id = $_GET['play']; ......
?>
<audio title="Audio Title" controls loop autoplay controlsList="nodownload" preload="auto" id="myAudio" />
<source src="audio2.mp3" type="audio/mp3" id="audioID">
我已经尝试了这里和网上的一些建议，例如添加；
<script type="text/javascript">
const audio = document.querySelector('myAudio');
audio.onended = (event) => {
console.log('Video stopped either because 1) it was over, ' +
'or 2) no further data is available.');
};
</script>
和这个...
<script type="text/javascript">
const audio = document.querySelector('myAudio');
audio.addEventListener('ended', (event) => {
console.log('Video stopped either because 1) it was over, ' +
'or 2) no further data is available.');
});
</script>
和这个...
<script type="text/javascript">
myAudio.addEventListener("ended", function(){
myAudio.currentTime = 0;
console.log("ended");
alert("ended");
});
</script>
但它们都不起作用。我究竟做错了什么？
UPDATE
感谢 @Roko C. Buljan 的贡献，我能够使用以下脚本将新曲目加载到 div#player 中。当曲目结束时，使用 ajax 函数 loadurl 模拟单击，并将新曲目加载到 #player 中。这会加载一个新曲目，但当该曲目结束时，它不会加载另一个曲目。我该如何解决这个问题？
<a href="javascript:;" id="randomplay" onClick="loadurl('player.php?random=1','player')"></a>
<script type="text/javascript">
const audio = document.querySelector('#myAudio');
audio.addEventListener("ended", () => {
$("#randomplay").click();
});
</script>
