嘿，我来帮你搞定这个音频循环的小问题！你现在的需求是：点击按钮启动随机音频播放，再次点击停止；而且音频自然结束后，要自动随机选列表里的新音频播放，而不是重复当前那首对吧？

问题根源 #

原来的脚本应该是没有监听音频的ended事件，或者在事件里只是重复播放当前音频。我们需要在音频播放完毕时，触发“重新随机选曲”的逻辑，而不是循环同一首。

修改后的完整代码 #

// 你的音频列表（补全剩下的路径即可）
const sounds = [
  "sounds/royksopp.mp3",
  "sounds/9thwonder.mp3",
  "sounds/thisbeat.mp3",
  "sounds/mosdef.mp3",
  "sounds/bewater.mp3",
  "sounds/boutdre.mp3",
  // 这里添加剩下的音频路径
];

// 全局变量：追踪当前音频实例和播放状态
let currentAudio = null;
let isPlaying = false;

// 替换成你的播放按钮选择器（比如按id或类名）
const playButton = document.getElementById('playButton');

// 按钮点击事件处理
playButton.addEventListener('click', function() {
  if (isPlaying) {
    // 停止音频并重置状态
    currentAudio.pause();
    currentAudio.currentTime = 0;
    isPlaying = false;
    playButton.textContent = "播放"; // 可选：更新按钮文字
  } else {
    // 启动随机播放
    playRandomSound();
    isPlaying = true;
    playButton.textContent = "停止"; // 可选：更新按钮文字
  }
});

// 封装随机播放逻辑，方便复用
function playRandomSound() {
  // 先清理之前的音频实例
  if (currentAudio) {
    currentAudio.pause();
    currentAudio.currentTime = 0;
  }

  // 可选：确保下一首和当前的不一样（避免连续重复）
  let randomIndex;
  do {
    randomIndex = Math.floor(Math.random() * sounds.length);
  } while (currentAudio && sounds[randomIndex] === currentAudio.src.split('/').pop());

  // 创建新的音频实例
  currentAudio = new Audio(sounds[randomIndex]);

  // 监听音频结束事件：播放完自动选新音频
  currentAudio.addEventListener('ended', function() {
    // 只有在用户没点击停止的情况下，才继续播放下一首
    if (isPlaying) {
      playRandomSound();
    }
  });

  // 开始播放，处理可能的浏览器自动播放限制
  currentAudio.play().catch(err => {
    console.error('音频播放失败:', err);
    isPlaying = false;
    playButton.textContent = "播放";
  });
}

关键修改点说明 #

• 全局状态追踪：用currentAudio保存当前正在播放的音频实例，isPlaying标记是否处于播放状态，方便控制停止和后续自动播放逻辑。
• ended事件监听：给每个新创建的音频绑定ended事件，当音频自然播放完毕时，只要用户没点击停止（isPlaying为true），就调用playRandomSound()选新的音频播放。
• 可选去重复逻辑：用do-while循环确保下一首不会和当前播放的音频重复，如果你不介意偶尔连续播放同一首，可以删掉这段do-while代码，直接用randomIndex = Math.floor(Math.random() * sounds.length)。
• 错误处理：给play()方法添加catch，处理浏览器的自动播放限制（比如用户没交互就播放会失败），避免状态异常。

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