Web Audio API 核心是构建音频节点处理图，需四步：创建并恢复 AudioContext；添加源节点（如 AudioBufferSourceNode）；连接效果节点（如 GainNode、AnalyserNode）；连接 destination 并调用 start() 播放。
使用 Web Audio API 处理声音，核心是构建一个由音频节点（AudioNode）组成的处理图（Audio Graph），通过连接源、效果器和目的地来实现播放、变换与控制。它不是直接操作原始音频数据流，而是基于时间精度的节点式信号处理系统。
创建音频上下文（AudioContext）
这是所有 Web Audio 操作的起点，相当于整个音频系统的“引擎”。必须先创建才能生成或连接任何节点。
- 现代浏览器中推荐使用 new AudioContext()（非兼容旧版可加前缀，但已基本淘汰）
- 注意：AudioContext 默认处于 suspended 状态，首次交互（如点击按钮）后需手动调用 resume() 才能开始播放
- 一个页面通常只需一个 AudioContext，可复用，避免频繁创建销毁
添加音频源（Source Node）
声音从这里进入处理图，常见类型有：
- AudioBufferSourceNode：用于播放已加载的音频文件（如 MP3、WAV），需先解码为 AudioBuffer
- OscillatorNode：生成合成波形（正弦波、方波等），适合音效或测试信号
- MediaElementAudioSourceNode：将 <audio> 或 <video> 元素接入 Web Audio 流程，实现播放控制与效果叠加
- MediaStreamAudioSourceNode：接入麦克风或屏幕共享等实时媒体流
连接处理节点（Effect & Processing Nodes）
在源与目的地之间插入各类节点，实现音效、分析或路由功能：
- GainNode：调节音量（最常用，替代简单的 volume 属性）
- BiquadFilterNode：提供高低通、带通、陷波等滤波效果
- ConvolverNode：实现混响等基于脉冲响应的空间效果
- AnalyserNode：不改变音频，仅用于频谱/波形数据采集（常配合 canvas 可视化）
- 节点间用 connect() 方法串联，支持多路输出、单路输入的灵活拓扑
连接到目的地（Destination）并启动
最终把处理后的音频送入扬声器或进一步导出：
- 目标通常是 audioContext.destination（即系统扬声器）
- 源节点需显式调用 start()（对 OscillatorNode）或 bufferSource.start()（对 AudioBufferSourceNode）才能发声
- 可结合 stop()、pause()（需自行管理状态）、或用 gain.gain.setValueAtTime(0) 实现静音
- 若需录制，可用 MediaStreamAudioDestinationNode 获取 MediaStream，再用 MediaRecorder 导出
不复杂但容易忽略细节，比如上下文挂起、节点生命周期管理、时间参数的高精度调度（用 currentTime 和 setValueAtTime 等方法）。掌握这四步，就能搭建从播放、变调、滤波到可视化的基本音频流程。
