如何在JavaScript中实现点击控制音频暂停与续播功能

问题分析 #

你的代码存在几个核心问题，导致无法实现暂停后从原位置恢复播放的功能：

• 每次点击都新建AudioContext和Audio实例，完全无法跟踪之前播放的音频状态
• 调用了未定义的sb.audioCtx变量，会直接引发报错
• 恢复播放时重新设置音频src，导致音频从头开始而非从暂停点继续
• UI更新的目标元素（.jp-play）和触发点击的元素（.PlaySong）不匹配

修复后的代码 #

HTML

<div class="PlaySong"><i class='ms_play_control'></i></div>

JavaScript

// 将音频实例和上下文放在点击事件外部，保证整个生命周期内只有一个实例
let audioCtx = null;
let song = null;
// 用变量标记当前播放状态，判断更直观
let isPlaying = false;

$(".PlaySong").on("click", function () {
  // 首次点击时才初始化音频资源，避免不必要的性能消耗
  if (!audioCtx) {
    audioCtx = new AudioContext();
    song = new Audio("Whatsapp-Message-Sent-Sound.mp3");
    // 关联音频元素到AudioContext（如果需要使用上下文的高级功能）
    const source = audioCtx.createMediaElementSource(song);
    source.connect(audioCtx.destination);
  }

  if (isPlaying) {
    // 执行暂停操作
    song.pause();
    audioCtx.suspend();
    // 更新按钮为播放图标
    $(this).html(`<i class='ms_play_control'></i>`);
  } else {
    // 恢复播放
    audioCtx.resume().then(() => {
      song.play();
      // 更新按钮为暂停图标（请替换为你实际的暂停图标类名）
      $(this).html(`<i class='ms_pause_control'></i>`);
    });
  }
  // 切换播放状态标记
  isPlaying = !isPlaying;
});

关键修改说明 #

• 把audioCtx和song实例提升到外部作用域，确保每次点击操作的是同一个音频对象，能持续跟踪播放进度
• 新增isPlaying变量直接标记播放状态，比依赖audioCtx.state判断更可靠
• 暂停时直接调用song.pause()配合audioCtx.suspend()，恢复时无需重新设置音频源，保证从暂停位置继续播放
• UI更新直接操作触发点击的.PlaySong元素，避免目标元素不匹配的问题
• 延迟初始化音频资源，只有首次点击时才创建实例，优化性能

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