JS多音轨播放器实现：播放第二轨前如何先停止当前播放的音轨

修复方案 #

核心思路是新增全局变量跟踪当前正在播放的音频实例，每次触发新音轨播放前先重置上一个实例的状态。

步骤1：新增全局状态记录

在所有循环逻辑外层定义两个变量，存储当前播放的音频对象和对应的播放器DOM节点：

// 全局记录当前正在播放的音频与对应播放器
let currentPlayingAudio = null;
let currentPlayingPlayer = null;

步骤2：修改播放触发逻辑

在你原有start()函数内的播放按钮点击事件中，新增全局暂停逻辑：

const playBtn = audioPlayer.querySelector('.btn-play');
playBtn.addEventListener('click', () => {
  // 存在其他正在播放的音轨时先暂停重置
  if (currentPlayingAudio && currentPlayingAudio !== audio) {
    currentPlayingAudio.pause();
    currentPlayingAudio.currentTime = 0;
    currentPlayingPlayer.classList.remove('playing');
  }

  // 切换当前音轨播放状态
  if (audio.paused) {
    audio.play();
    currentPlayingAudio = audio;
    currentPlayingPlayer = audioPlayer;
  } else {
    audio.pause();
    currentPlayingAudio = null;
    currentPlayingPlayer = null;
  }
})

步骤3：补充结束回调兜底

修改原有音频播放结束的回调，同步清空全局状态避免错乱：

audio.onended = () => {
  audio.currentTime = 0;
  // 清空对应全局记录
  if (currentPlayingAudio === audio) {
    currentPlayingAudio = null;
    currentPlayingPlayer = null;
  }
};

修改完成后点击任意音轨的播放按钮，会自动停止之前正在播放的音轨，直接启动新选中音轨的播放。

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