音乐播放结束后无法随机切换音频？JavaScript代码排查求助

嘿，我来帮你排查这个问题！核心问题出在**ended事件的回调逻辑以及重复绑定事件**这两点上，咱们一步步拆解：

问题根源 #

1. 重复绑定ended事件：每次点击「启动/停止」按钮，你都会给音频元素添加一个新的ended监听器，这不仅会导致后续触发多次无效回调，更关键的是——
2. ended回调没有切换音频源：你当前的回调里只是重置播放进度并重新播放当前音频，完全没有去随机选择新的音频文件，所以播放结束后自然会重复同一首。而你停止再启动时，是手动触发了audie.src = 随机地址，所以能正常切换，但自动结束时走的是回调逻辑，没做这个操作。

修复后的代码 #

咱们调整一下逻辑，把事件监听移到函数外（只绑定一次），同时在ended回调里实现随机切换：

var sounds = [ 
  "sounds/royksopp.mp3", 
  "sounds/9thwonder.mp3", 
  "sounds/thisbeat.mp3", 
  "sounds/mosdef.mp3", 
  "sounds/bewater.mp3", 
  "sounds/boutdre.mp3", 
  "sounds/masterflash.mp3", 
  "sounds/2ep.mp3", 
  "sounds/drewestcoast.mp3", 
  "sounds/poetry.mp3", 
  "sounds/mfdoom.mp3", 
  "sounds/imnot.mp3", 
  "sounds/jamba.mp3", 
  "sounds/meetyour.mp3", 
  "sounds/popyacork.mp3", 
  "sounds/dreams.mp3", 
  "sounds/unders.mp3", 
  "sounds/oizo.mp3"
]; 

// 先获取音频元素，只绑定一次ended事件
var audie = document.getElementById("myAudio");
audie.addEventListener('ended', function() {
  // 播放结束时，随机选择新的音频源
  var randomSrc = sounds[Math.floor(Math.random() * sounds.length)];
  this.src = randomSrc;
  this.play();
}, false);

function StartOrStop() {
  if (!audie.paused) {
    audie.pause();
  } else {
    // 启动时也随机选一首
    var randomSrc = sounds[Math.floor(Math.random() * sounds.length)];
    audie.src = randomSrc;
    audie.play();
  }
}

关键调整点说明 #

• 只绑定一次ended事件：把事件监听移到全局作用域，避免每次点击按钮都重复绑定，防止出现多次回调的问题。
• ended回调里更新音频源：在播放结束的回调中，重新随机选择音频文件并设置src，然后再播放，这样就能实现自动随机切换下一首。
• 移除无用变量：原来的srcAudio变量没有实际用到，直接删除即可。

这样修改后，不管是第一次点击启动，还是播放结束自动切换，都能随机播放新的音频；点击停止再启动也能正常工作。

内容的提问来源于stack exchange，提问作者Steve Kess