多音符顺序播放，WebAudioAPI实现教程

本文深入解析了如何利用 Web Audio API 实现精准、流畅的多音符顺序播放，摒弃易导致主线程阻塞和时间错乱的 while 循环方案，转而采用基于 context.currentTime 的非阻塞式 setTimeout 递归调度，配合单振荡器复用、setValueAtTime 频率精确设定及动态波形轮换机制，在保证音频时序严谨性的同时大幅提升性能与可扩展性——无论你是初探 Web 音频的新手，还是希望构建专业级音乐工具的开发者，这套轻量却健壮的实现方案都能为你提供坚实可靠的技术起点。

本文详解如何用 setTimeout 替代阻塞式 while 循环，结合 Web Audio API 的 AudioContext 和 OscillatorNode，实现精确、可扩展的音符序列播放，并支持动态波形切换。

本文详解如何用 setTimeout 替代阻塞式 while 循环，结合 Web Audio API 的 AudioContext 和 OscillatorNode，实现精确、可扩展的音符序列播放，并支持动态波形切换。

在 JavaScript 中直接使用 while 循环配合 wait()（该函数并不存在于标准 API 中）或同步延时逻辑来控制音频播放，会导致主线程阻塞、AudioContext 时间戳失效，且无法触发真正的异步音频调度——这正是原代码中“只发出一个音”或“所有音同时响起”的根本原因。Web Audio API 的设计哲学是基于时间线的非阻塞调度，所有音频操作（如 start()、stop()、参数变化）都应通过 context.currentTime 精确指定生效时刻。

以下是推荐的解决方案：使用递归调用 setTimeout 驱动音符序列，配合 setValueAtTime() 实现平滑频率切换，并支持按需轮换波形类型：

function playTune(frequencies, oscillatorTypes = ['sine']) {
  const context = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = context.createOscillator();

  // 初始化振荡器并连接
  oscillator.connect(context.destination);
  oscillator.type = oscillatorTypes[0]; // 默认首种波形

  let currentIndex = 0;
  const totalNotes = frequencies.length;

  function scheduleNextNote() {
    // 检查是否已播放完毕
    if (currentIndex >= totalNotes) {
      oscillator.stop();
      return;
    }

    // 设置当前音符频率（使用 setValueAtTime 确保时间精度）
    const now = context.currentTime;
    oscillator.frequency.setValueAtTime(frequencies[currentIndex], now);

    // 若为首个音符，启动振荡器；否则仅更新频率（无需重复 start）
    if (currentIndex === 0) {
      oscillator.start();
    }

    // 切换波形类型（可选：每音符轮换）
    const typeIndex = currentIndex % oscillatorTypes.length;
    oscillator.type = oscillatorTypes[typeIndex];

    // 安排下一音符：1 秒后触发（即每个音符持续约 1 秒）
    currentIndex++;
    setTimeout(scheduleNextNote, 1000);
  }

  // 启动播放流程
  scheduleNextNote();
}

// 使用示例：播放 9 个频率，交替使用正弦波与方波
playTune([250, 200, 500, 1000, 1500, 350, 460, 720, 2000], ['sine', 'square']);

✅ 关键改进点说明：

• 移除阻塞循环：setTimeout 将控制权交还事件循环，确保 AudioContext 能正常推进时间轴；
• 精准时间调度：所有 setValueAtTime() 均基于 context.currentTime，避免因 JS 执行延迟导致的音符错位；
• 单振荡器复用：全程只创建一个 OscillatorNode，通过动态修改 frequency 和 type 实现音符切换，显著降低资源开销；
• 波形灵活轮换：利用取模运算 currentIndex % oscillatorTypes.length 自动循环波形列表；
• 安全启停：仅在首音符调用 start()，末音符调用 stop()，中间仅更新参数，符合 Web Audio 最佳实践。

⚠️ 注意事项：

• 浏览器要求用户手势（如点击）触发 AudioContext 启动（自动播放策略），请确保首次调用 playTune() 发生在按钮点击等交互事件内；
• 若需更短/更长音符时长，调整 setTimeout 的毫秒值，并考虑配合 exponentialRampToValueAtTime() 实现淡入淡出，避免爆音；
• oscillator.type 改变时，部分浏览器可能对某些波形（如 'triangle'）支持有限，建议提前检测或提供降级方案。

通过以上结构化实现，你将获得一个稳定、可维护、可扩展的音符序列播放器，为后续添加节奏控制、音色包络、和声叠加等功能打下坚实基础。

本篇关于《多音符顺序播放，WebAudioAPI实现教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！