Web Audio API 通过 AudioContext 管理音频节点，实现加载、播放、增益、滤波和频谱分析。1. 创建 AudioContext 作为核心；2. 用 fetch 加载音频并解码为 AudioBuffer；3. 通过 BufferSourceNode 播放；4. 连接 GainNode 调节音量；5. 使用 BiquadFilterNode 实现低通滤波；6. 利用 AnalyserNode 获取频谱数据用于可视化。在用户交互中启动上下文以避免自动播放限制，掌握这些基础即可构建基本音频功能。
Web Audio API 是浏览器提供的强大工具，用于在网页中处理和播放音频。它不依赖第三方插件，可以直接生成、加载、分析和修改音频数据，适合做音乐应用、游戏音效、语音处理等场景。核心是通过音频上下文（AudioContext）构建音频节点连接的处理链。
创建音频上下文
所有操作都从 AudioContext 开始。它是整个音频处理的中枢，负责管理音频节点和时间调度。
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
建议在用户交互（如点击按钮）中启动上下文，避免自动播放被浏览器阻止。
加载与播放音频文件
使用 fetch 或 XMLHttpRequest 获取音频文件，解码为音频缓冲区后播放。
async function loadAndPlay(url) {
const response = await fetch(url);
const arrayBuffer = await response.arrayBuffer();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContext.destination);
source.start();
}
source.start() 可传入延迟时间，实现精确播放控制。
添加效果：增益与滤波
通过连接不同节点，可以对音频进行处理。常见的有音量调节和频率过滤。
- 增益控制：使用 GainNode 调整音量
- 低通滤波：用 BiquadFilterNode 过滤高频
const gainNode = audioContext.createGain();
gainNode.gain.value = 0.5; // 半音量
source.connect(gainNode);
gainNode.connect(audioContext.destination);
const filter = audioContext.createBiquadFilter();
filter.type = 'lowpass';
filter.frequency.value = 1000; // 截止频率 1000Hz
source.connect(filter);
filter.connect(audioContext.destination);
实时分析音频频谱
使用 AnalyserNode 获取音频的时域或频域数据，常用于可视化波形或频谱条。
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
source.connect(analyser);
analyser.connect(audioContext.destination);
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
function draw() {
requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
// 使用 canvas 绘制 dataArray 数据
}
draw();
基本上就这些。掌握上下文、节点连接、缓冲播放和简单处理，就能搭建基础音频功能。后续可深入学习振荡器、声相控制、离线渲染等高级特性。
