JavaScript中Audio对象.pause()函数无法生效的求助

AI 小北

2026-8-8

问题诊断与解决

你的问题核心原因是每次点击按钮都会创建全新的Audio实例：

第一次点击时，创建Audio实例并调用play()，音频正常播放；
第二次点击时，你重新执行new Audio(...)生成了一个未播放的新实例，调用它的pause()不会影响到之前正在后台播放的那个音频，而原实例因为没有被引用会持续播放，最终出现按钮状态切换正常但音频停不下来的现象。

修复方案

将Audio实例的声明移到点击事件逻辑外部，确保整个交互复用同一个音频对象：

// 把Audio实例和状态变量放在外部，避免每次点击都重建
let audio;
let isPlaying = false;

// 按钮点击事件处理函数
function togglePlay(song_number) {
  // 首次播放或切换歌曲时，才创建/更新Audio实例
  if (!audio || audio.src !== songs[song_number].link) {
    audio = new Audio(songs[song_number].link);
  }

  if (isPlaying) {
    audio.pause();
    audio.currentTime = 0; // 可选：重置播放进度
    document.getElementById(`playButton${song_number}`).src = "./extern_media/playbutton.png";
    document.getElementById(`playButton${song_number}`).width = "80";
    isPlaying = false;
  } else {
    audio.play();
    document.getElementById(`playButton${song_number}`).src = "./extern_media/pausebutton.png";
    document.getElementById(`playButton${song_number}`).width = "50";
    isPlaying = true;
  }
}