极简html5音频合成器基于web audio api，通过audiocontext、oscillatornode和gainnode构建实时发声链路，支持键盘映射音符、波形切换及滤波效果，并需手动管理上下文激活与节点生命周期。
用 Web Audio API 构建一个极简但可演奏的 HTML5 音频合成器，核心在于避开复杂波形设计，聚焦于 oscillator + gain 的实时控制链路。它不需要加载音频文件，不依赖第三方库，几行关键代码就能发出音符、切换音色、响应键盘按键。
基础发声：从一个正弦波开始
Web Audio 的起点是 AudioContext 和 OscillatorNode。创建振荡器后，设定频率（如 440Hz 对应 A4），连接到增益节点再输出到扬声器，就完成了最简发声通路：
- 调用
context.createOscillator()创建振荡器 - 设置
oscillator.frequency.value = 440（单位 Hz） - 用
context.createGain()控制音量，避免爆音 - 必须显式调用
oscillator.start()和oscillator.stop()来启停发声
模拟真实按键：键盘事件驱动音符
把电脑键盘映射为钢琴键，例如 “a”=C4（261.63Hz）、“s”=D4（293.66Hz）……用 keydown 触发发声，keyup 触发释放。注意两点：
- 每个按键需独立管理振荡器和增益节点，避免重复 start 或 stop 已销毁节点
- 使用
setTimeout或onended回调确保 stop 在音符结束后执行，防止残留噪声 - 推荐将当前活跃音符存入 Map 或对象中，按 key 值查表启动/停止对应振荡器
加点色彩：切换波形与滤波
仅正弦波太单薄？Web Audio 支持四种内置波形："sine"、"square"、"sawtooth"、"triangle"。只需修改 oscillator.type 即可切换。更进一步，插入 BiquadFilterNode 可模拟低通、高通效果：
- 创建滤波器：
const filter = context.createBiquadFilter() - 设类型：
filter.type = "lowpass"，并调节filter.frequency.value = 1000 - 连接路径变为：osc → filter → gain → destination
- 滤波器参数可随音符动态变化，比如高音自动提升截止频率，增强表现力
保持稳定：处理音频上下文状态
现代浏览器要求用户手势（如点击、按键）后才能启动 AudioContext。页面加载时 context 处于 suspended 状态，直接调用 start() 会失败：
- 监听首次用户交互（如
document.addEventListener('click', resume)） - 在回调中执行
context.state === 'suspended' && context.resume() - 后续所有音频操作（创建 oscillator、connect 等）都应在 resume 后进行
- 建议在 UI 上加一个“点击开始发声”的提示按钮，提升用户体验
不复杂但容易忽略——真正让这个极简乐器可用的，不是算法多精巧，而是对 Web Audio 生命周期、事件时机和资源清理的准确把握。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
