Ajax HTML5 Audio Player播放第二首后无法加载下一曲问题咨询

问题原因 #

你在页面初始化时仅给当时存在的#myAudio元素绑定了ended事件。每次你通过ajax加载player.php内容替换div#player时，原有的audio元素会被完全销毁，新插入页面的audio元素没有绑定任何ended事件，因此第二首曲目播放结束后无法触发后续加载逻辑，你的判断是正确的。

可行解决方案 #

这里提供两种实现方式，按需选择即可：

方案1：每次加载完新播放器后重新绑定事件

将事件绑定逻辑封装为公共函数，在每次ajax加载完成、新播放器插入页面后重新调用绑定：
首先调整你的自定义loadurl函数，增加加载完成的回调支持，示例如下：

// 封装音频结束事件绑定
function bindAudioEvent() {
  const audio = document.querySelector('#myAudio');
  // 先移除旧事件避免重复绑定
  audio?.removeEventListener('ended', onTrackEnd);
  audio?.addEventListener('ended', onTrackEnd);
}

// 曲目结束处理逻辑
function onTrackEnd() {
  // loadurl第三个参数为加载完成后的回调
  loadurl('player.php?random=1', 'player', bindAudioEvent);
}

// 页面首次加载完成后初始化绑定
document.addEventListener('DOMContentLoaded', bindAudioEvent);

如果你的loadurl是自己封装的ajax方法，只需要在它的内部请求成功、将html插入#player的逻辑之后，执行传入的回调函数即可。

方案2：使用事件捕获全局监听，无需重复绑定

因为audio的ended事件不支持冒泡，所以需要开启事件捕获才能在父级监听到该事件，无需每次加载后重新绑定：

// 直接在document上绑定捕获阶段的ended事件
document.addEventListener('ended', function(e) {
  // 校验触发事件的元素是否为你的音频播放器
  if (e.target && e.target.id === 'myAudio') {
    loadurl.call(this, 'player.php?random=1', 'player');
  }
}, true); // 第三个参数传true开启事件捕获

这种方式不需要调整你现有的loadurl逻辑，改完直接生效。

注意事项 #

• 确保player.php返回的音频元素id固定为myAudio，和监听逻辑匹配
• 部分浏览器会限制音频自动播放，需要用户此前有过点击页面的交互行为才能正常触发自动播放下一曲

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