Web Audio API 中实现精准的播放与停止控制-html教程-PHP中文网

Web Audio API 中实现精准的播放与停止控制

本文讲解如何在 web audio api 中正确实现“播放/停止”按钮功能，避免声音重叠问题，核心是通过停止 audiobuffersourcenode 而非 suspend 或 close audiocontext。

本文讲解如何在 web audio api 中正确实现“播放/停止”按钮功能，避免声音重叠问题，核心是通过停止 audiobuffersourcenode 而非 suspend 或 close audiocontext。

在 Web Audio API 中，AudioContext 是整个音频系统的中枢，它管理所有音频节点（如 BufferSourceNode、GainNode 等）。常见误区是试图用 ctx.suspend() 或 ctx.close() 来“停止声音”，但这些操作作用于上下文层面：suspend() 暂停时间推进，却不会终止已调度的音频节点；close() 则彻底销毁上下文，后续无法重新使用（调用 new AudioContext() 会创建新实例，但旧节点仍可能残留或引发异常）。

真正可靠的停止方式，是显式追踪并停止所有正在播放的 AudioBufferSourceNode 实例。因为每个 createBufferSource() 创建的节点是一次性对象——它只能 start 一次，且必须显式调用 stop() 才能中止其播放（否则即使超出 buffer 长度，也可能因 ramp 或延迟调度而持续生效）。

✅ 正确做法：维护播放节点引用并统一停止

修改关键逻辑如下：

声明全局数组存储活跃的 source 节点
在 playnote() 中将新建的 source 推入该数组
在 stop() 处理函数中遍历并调用 stop()，再清空数组
确保 stop() 在 ctx.currentTime 之后调用（避免 InvalidStateError）

// 全局变量：追踪所有活跃的 AudioBufferSourceNode
let activeSources = [];

function playnote(note, delay) {
  const source = ctx.createBufferSource();
  const gainNode = ctx.createGain();

  source.buffer = c4; // 假设 c4 已解码完成
  gainNode.gain.value = 1;
  gainNode.gain.setValueAtTime(1, ctx.currentTime + delay);
  gainNode.gain.exponentialRampToValueAtTime(0.0005, ctx.currentTime + 1.25 + delay);

  source.connect(gainNode).connect(ctx.destination);
  source.start(ctx.currentTime + delay);

  // ✅ 关键：保存引用，便于后续停止
  activeSources.push(source);
}

function stopAllSounds() {
  // ✅ 安全停止：对每个 source 调用 stop()（即使已自然结束，调用 stop 也无副作用）
  activeSources.forEach(source => {
    try {
      if (source && source.state !== 'ended') {
        source.stop(); // 终止播放
      }
    } catch (e) {
      // 忽略已停止或无效节点的错误（如 DOMException: InvalidStateError）
    }
  });
  activeSources = []; // 清空引用列表
}

// 绑定停止按钮事件
btn_stop.addEventListener('click', () => {
  stopAllSounds();
});

⚠️ 注意事项与最佳实践

不要依赖 ctx.suspend() 实现“静音”：它仅暂停时间轴，已调度的 start() 和 stop() 仍按原计划执行，可能导致不可预测行为。

谷歌浏览器插件HTML Tree Generator 查看网页HTML代码结构树
HTML Tree Generator 上是一个元素树，css定义了布局。此扩展将任何页面显示为树，对于做网页前端开发来说非常有用。插件虽然是2015年发布的，但是在2022年依然可用。HTML Tree Generator v1.0上次更新日期：2015年8月20日

下载
避免重复创建 AudioContext：初始化一次即可，反复 new AudioContext() 可能触发浏览器策略限制（如 iOS Safari 的自动暂停机制），且增加资源开销。

确保 c4 已完成解码再启用播放：当前代码中 fetch().then(...).then(...) 是异步的，若用户过早点击播放，c4 可能为 undefined。建议添加加载状态校验：

let c4 = null;
fetch("...").then(...).then(decoded => { c4 = decoded; }).catch(err => console.error("加载失败", err));

btn.addEventListener('click', () => {
  if (!c4) {
    alert("音频尚未加载完成，请稍候");
    return;
  }
  step51();
});

stop() 的时间参数可选，但推荐显式传入 ctx.currentTime：source.stop(ctx.currentTime) 立即终止；若省略，则默认立即停止（等价于 stop(0)），但在高精度调度场景下显式指定更安全。

✅ 总结

实现干净的播放/停止交互，本质在于节点级控制而非上下文级控制。通过主动管理 AudioBufferSourceNode 生命周期（创建时记录、停止时清理），你既能保证多次点击“播放”从头开始，又避免声音堆叠、内存泄漏或上下文失效等问题。这一模式也天然兼容后续扩展——例如加入音色选择、速度调节或实时效果链，只需在节点图中增删对应模块，无需重构播放控制逻辑。