点击事件重复创建Audio元素导致无法暂停音频的求助

问题根源 #

1. 每次点击按钮都会创建新的Audio实例，导致暂停操作仅作用于新实例，原播放实例不受影响
2. 全局check变量无法适配多音频场景，状态判断逻辑混乱

修复代码实现 #

通过维护当前活跃的音频实例，直接利用实例自身的状态来控制播放/暂停，避免重复创建实例：

// 存储当前正在播放的音频实例
let currentAudio = null;

masterPlayButton.addEventListener("click", function (i) {
  minorPlayPause(i);
});

function minorPlayPause(x) {
  const targetSrc = `songs/${x}.mp3`;

  // 处理同一音频的播放/暂停切换
  if (currentAudio && currentAudio.src.includes(targetSrc)) {
    currentAudio.paused ? currentAudio.play() : currentAudio.pause();
  } else {
    // 切换音频时先暂停之前的播放
    if (currentAudio) currentAudio.pause();
    // 创建新音频实例并播放
    currentAudio = new Audio(targetSrc);
    currentAudio.play();
  }
}

代码逻辑说明 #

• 用currentAudio变量跟踪当前活跃的音频实例，避免每次点击重复创建
• 通过对比音频源路径，判断是否为同一音频：
  • 同一音频：直接调用实例的play()或pause()方法，利用实例自带的paused属性判断状态
  • 不同音频：先暂停当前播放的音频，再创建新实例并播放

进阶优化（多音频独立状态） #

如果需要保留每个音频的实例状态，避免切换时重新加载音频，可以用对象存储所有音频实例：

// 存储所有音频实例，key为音频标识x
const audioMap = {};

masterPlayButton.addEventListener("click", function (i) {
  minorPlayPause(i);
});

function minorPlayPause(x) {
  // 不存在则创建实例
  if (!audioMap[x]) {
    audioMap[x] = new Audio(`songs/${x}.mp3`);
  }

  const audio = audioMap[x];
  if (audio.paused) {
    // 可选：自动暂停其他所有音频
    Object.values(audioMap).forEach(item => item.pause());
    audio.play();
  } else {
    audio.pause();
  }
}

这个版本可以缓存音频实例，切换时无需重新加载，还能轻松实现“单音频播放”的交互逻辑

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