本文详解如何用 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'）支持有限，建议提前检测或提供降级方案。
通过以上结构化实现，你将获得一个稳定、可维护、可扩展的音符序列播放器，为后续添加节奏控制、音色包络、和声叠加等功能打下坚实基础。
