WebAudioAPI 提供高级音频控制，支持可视化、自定义音效、3D 定位与实时录音。通过 AnalyserNode 实现频谱绘制，AudioWorklet 进行非阻塞音效处理，PannerNode 结合 AudioListener 模拟空间音效，再集成 MediaStreamAudioDestinationNode 与 MediaRecorder 实现带效果的音频录制，构建高性能浏览器音频应用。
WebAudioAPI 是现代浏览器中处理音频的强大工具，相比传统的 <audio></audio> 标签播放，它提供了更精细的控制能力，支持实时音频合成、滤波、可视化、空间化音效等高级功能。掌握其高级应用，可以实现音乐可视化、语音识别预处理、虚拟现实音效甚至浏览器端的数字音频工作站（DAW）。
1. 音频图谱分析与可视化
通过 AnalyserNode 可以获取当前音频的时域和频域数据，常用于制作音乐频谱或波形动画。
- 创建 AnalyserNode 并连接到音频源
- 使用
getByteFrequencyData()获取频率分布 - 使用
getByteTimeDomainData()获取波形数据 - 结合 Canvas 或 WebGL 实时绘制
示例代码片段：
rgb(${barHeight + 100},50,50)2. 自定义音频节点与音效处理
利用 ScriptProcessorNode（已废弃）或现代替代方案 AudioWorklet，可以在音频流中插入自定义处理逻辑，比如失真、回声、压缩等效果。
立即学习“Java免费学习笔记（深入）”；
使用 AudioWorklet 的优势：
- 运行在独立线程，不阻塞主线程
- 支持模块化，可复用效果器
- 兼容现代浏览器（Chrome、Edge、Firefox 等）
实现一个简单的增益控制效果器：
// gain-processor.js
class GainProcessor extends AudioWorkletProcessor {
process(inputs, outputs, parameters) {
const input = inputs[0];
const output = outputs[0];
const gain = parameters.gain[0] || 1.0;
<pre class="brush:php;toolbar:false;">for (let channel = 0; channel < input.length; channel++) {
for (let i = 0; i < input[channel].length; i++) {
output[channel][i] = input[channel][i] * gain;
}
}
return true;} }
registerProcessor('gain-processor', GainProcessor);
主脚本中加载并使用：
await audioContext.audioWorklet.addModule('gain-processor.js');
const gainNode = new AudioWorkletNode(audioContext, 'gain-processor', {
parameters: { gain: 0.5 }
});
inputSource.connect(gainNode).connect(audioContext.destination);
3. 3D 空间音效（PannerNode）
WebAudioAPI 支持 HRTF（头部相关传递函数）算法模拟三维声音定位，适用于游戏、VR 场景。
核心组件：
-
PannerNode：定义声源位置、方向、速度 -
AudioListener：代表听者，通常绑定摄像机位置
设置空间音效示例：
const panner = new PannerNode(audioContext, {
panModel: 'HRTF',
distanceModel: 'inverse',
positionX: 2,
positionY: 0,
positionZ: 1,
refDistance: 1,
maxDistance: 10000,
rolloffFactor: 1
});
<p>listener.setPosition(0, 0, 0); // 听者位置
source.connect(panner).connect(audioContext.destination);
</p>动态更新声源位置可实现移动音效，如汽车驶过、脚步声环绕等。
4. 实时录音与音频合成
结合 MediaRecorder API 和 WebAudioAPI，可实现高质量录音并实时处理。
常见流程：
- 使用
navigator.mediaDevices.getUserMedia获取麦克风输入 - 通过
audioContext.createMediaStreamSource接入 WebAudio 流程 - 添加效果器后送入
MediaRecorder编码保存
录制带混响的语音示例：
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const source = audioContext.createMediaStreamSource(stream);
<p>// 添加混响（使用 ConvolverNode）
const convolver = audioContext.createConvolver();
fetch('reverb-impulse.wav')
.then(response => response.arrayBuffer())
.then(data => audioContext.decodeAudioData(data))
.then(buffer => { convolver.buffer = buffer; });</p><p>source.connect(convolver).connect(audioContext.destination);</p><p>// 录制处理后的音频
const mediaRecorder = new MediaRecorder(audioContext.destination.stream);
mediaRecorder.start();
</p>注意：audioContext.destination.stream 并非标准属性，实际需使用 MediaStreamAudioDestinationNode 创建输出流。
基本上就这些。WebAudioAPI 的高级应用需要理解音频信号流、采样率、缓冲区等概念，但一旦掌握，就能在浏览器中构建出接近原生性能的音频应用。关键是合理组织节点结构，避免内存泄漏，并注意跨浏览器兼容性。
