HTML5 Audio播放结束自动加载随机新曲目功能异常解决方案问询

问题核心原因梳理 #

你之前的所有方案失效、以及更新后仅第一次能触发自动加载的问题，来自三个核心错误：

1. 所有<audio>标签都带了loop属性，这个属性会强制音频循环播放，ended事件根本不会触发
2. 元素选择器写错：document.querySelector('myAudio')缺少id选择器前缀#，实际根本没有选中音频元素
3. 每次ajax替换#player内的内容后，旧的音频元素被删除，新加载的音频元素没有重新绑定ended事件，所以第一次之后就失效了

修复方案 #

1. 先修正所有音频标签的基础配置 #

去掉所有loop属性，同时修正<audio>不自闭合的语法问题，示例如下：

<!-- 原页面和player.php返回的audio标签都按这个格式改 -->
<audio title="Audio title" controls autoplay controlsList="nodownload" preload="auto" id="myAudio">
  <source src="audio.mp3" type="audio/mp3" id="audioID">
</audio>

2. 改造JS逻辑，解决动态加载后事件失效问题 #

把事件绑定逻辑封装成单独方法，每次ajax加载完成后重新给新的音频元素绑定事件，不需要模拟点击链接：

// 原有的loadurl函数增加加载完成后的事件绑定逻辑
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;
        // 新增：内容加载完成后给新的音频绑定结束事件
        bindAudioEndEvent();
        delete XMLHttpRequestObject;
        XMLHttpRequestObject = null; 
      } 
    } 
    XMLHttpRequestObject.send(null); 
  } 
}

// 封装音频结束事件绑定逻辑
function bindAudioEndEvent() {
  const audio = document.querySelector('#myAudio');
  if(!audio) return;
  // 先移除旧事件避免重复绑定
  audio.removeEventListener('ended', onAudioEnd);
  audio.addEventListener('ended', onAudioEnd);
}

// 音频播放结束后的处理逻辑
function onAudioEnd() {
  // 直接调用加载随机音轨的接口，不需要模拟点击
  loadurl('player.php?random=1','player');
}

// 页面首次加载完成后先绑定一次事件
document.addEventListener('DOMContentLoaded', bindAudioEndEvent);

3. 确认player.php逻辑 #

确保player.php接收random=1参数时，能正确从数据库返回随机音轨的音频标签即可。

内容的提问来源于stack exchange，提问作者Jay Smoke