如何用纯JavaScript实现按钮点击切换音频播放/暂停功能？

你当前代码的核心问题是每次点击按钮都会新建一个Audio实例，导致无法对同一个音频进行暂停控制，同时状态切换的逻辑存在冗余。下面是修正后的实现方案：

修正思路 #

• 将Audio实例放在全局作用域（或闭包）中，确保每次操作的是同一个音频对象
• 通过音频的paused属性直接判断当前状态，执行对应播放/暂停操作
• 同步更新按钮的类名状态

完整代码实现 #

HTML代码 #

<button id="music" class="play-song"></button>

JavaScript代码 #

const audioBtn = document.getElementById('music');
// 全局存储音频实例，确保复用同一个对象
let audio = null;

if (audioBtn) {
  // 初始化音频对象
  audio = new Audio('/songs/1.mp3');
  audioBtn.addEventListener('click', toggleAudio, false);
}

function toggleAudio() {
  const btn = this;
  if (audio.paused) {
    audio.play();
    btn.classList.add('mute-audio');
  } else {
    audio.pause();
    btn.classList.remove('mute-audio');
  }
}

额外优化建议 #

• 若需页面刷新后保留播放进度，可结合localStorage记录音频的当前播放时间和状态，页面加载时恢复
• 可添加音频加载状态处理，比如在音频未加载完成时禁用按钮，避免无效点击
• 如需支持多音频切换，可扩展逻辑管理多个Audio实例，切换时暂停当前音频并播放新音频

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