【发布时间】：2021-11-26 22:02:06
【问题描述】：
我有一个webapp，当您单击使用 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>
但它们都不起作用。我做错了什么？
更新
感谢@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>
【问题讨论】：
-
PS... 停止使用
on*内联 JS 处理程序。 JS（与 STYLE 相同）应该都在各自的标签或文件中。请改用addEventListener。从 HTML5 开始，<script>标记中也不需要text/javascript。 -
另外，应该是
document.querySelector('#myAudio');而不是document.querySelector('myAudio'); -
@RokoC.Buljan 嘿兄弟！所以我让它在一定程度上工作，但我无法让它加载下一首曲目。有任何想法吗？我正在使用 ajax 将 php 页面加载到 div 中，但在加载下一个曲目后，它无法再次加载。
标签： javascript php jquery html5-audio