首先初始化AudioContext，再通过fetch加载音频并解码播放；接着插入AnalyserNode获取频率和波形数据用于可视化；推荐使用AudioWorklet进行自定义音频处理；结合getUserMedia可实现麦克风输入实时分析；注意上下文需用户交互触发，参数设置影响精度。
Web Audio API 提供了一套强大的工具来处理和分析音频数据，适合在浏览器中实现音频可视化、音效处理或实时音频分析。核心思路是通过音频上下文（AudioContext）构建音频处理链，将音频源连接到处理器节点，再提取数据进行分析。
创建音频上下文并加载音频
所有操作都基于 AudioContext。先初始化上下文，然后加载或捕获音频源。
示例：从网络加载音频文件- 使用 fetch() 获取音频文件的二进制数据
- 用 decodeAudioData() 解码为 AudioBuffer
- 通过 AudioBufferSourceNode 播放音频
代码片段：
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
fetch('audio.mp3')
.then(response => response.arrayBuffer())
.then(data => audioContext.decodeAudioData(data))
.then(buffer => {
const source = audioContext.createBufferSource();
source.buffer = buffer;
source.connect(audioContext.destination);
source.start();
});
使用 AnalyserNode 分析音频频率和波形
要获取音频的实时数据，比如频谱或时域波形，需要插入 AnalyserNode 到音频链中。
- AnalyserNode 可以输出 FFT 频率数据（frequency data）和时域数据（time domain data）
- 通过 getFloatFrequencyData() 或 getByteFrequencyData() 获取频谱
- 通过 getByteTimeDomainData() 获取波形数据
常用于音频可视化，比如绘制柱状频谱图或声波动画。
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
source.connect(analyser);
analyser.connect(audioContext.destination);
const bufferLength = analyser.frequencyBinCount;
const frequencyData = new Uint8Array(bufferLength);
function draw() {
requestAnimationFrame(draw);
analyser.getByteFrequencyData(frequencyData);
// 将 frequencyData 绘制到 canvas
}
draw();
使用 ScriptProcessorNode 或 AudioWorklet 进行自定义处理
如果需要修改音频样本，比如添加回声、滤波或降噪，可以使用脚本节点处理原始音频数据。
- ScriptProcessorNode 已被弃用，但仍可用
- 推荐使用 AudioWorklet 实现高性能音频处理
- 可在 AudioWorkletProcessor 中访问每个音频帧的样本
例如，在 AudioWorklet 中实现简单的增益控制或波形变形。
实时麦克风输入分析
结合 getUserMedia() 可以实时分析麦克风输入。
- 请求用户授权访问麦克风
- 将 MediaStream 连接到 AudioContext
- 通过 AnalyserNode 实时获取语音频谱
适用于语音识别预处理、KTV 音准检测等场景。
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const source = audioContext.createMediaStreamSource(stream);
const analyser = audioContext.createAnalyser();
source.connect(analyser);
// 后续可分析 analyser 数据
});
基本上就这些。掌握 AudioContext、AnalyserNode 和数据采集方法，就能实现大多数音频分析功能。注意采样率、fftSize 等参数会影响分析精度。实际项目中建议结合 Canvas 或 WebGL 做可视化输出。不复杂但容易忽略细节，比如上下文需用户手势触发。
