Web Audio API 提供浏览器内置的音频处理能力，通过 AudioContext 管理音频节点实现播放、增益、滤波与可视化；需在用户交互后创建上下文以绕过自动播放限制，结合 fetch 与 decodeAudioData 加载音频，利用 GainNode 和 BiquadFilterNode 控制音量和滤波，通过 AnalyserNode 获取频域数据用于 canvas 可视化，注意 CORS 和节点复用以优化性能。
Web Audio API 是现代浏览器提供的强大工具，能够实现复杂的音频处理和合成。它不依赖第三方插件，直接在浏览器中完成音频的播放、分析、可视化甚至实时效果处理。如果你希望在网页中实现更精细的音频控制，比如音效混响、频率分析或音乐可视化，Web Audio API 是首选方案。
创建音频上下文
所有 Web Audio 操作都基于 AudioContext。它是整个音频处理流程的入口，负责管理音频节点的连接与调度。
初始化一个音频上下文非常简单：
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
建议在用户交互（如点击按钮）后启动音频上下文，因为多数浏览器出于自动播放策略限制，不允许静音状态下直接播放音频。
立即学习“Java免费学习笔记（深入）”；
加载与播放音频文件
要播放本地或网络音频文件，通常结合 fetch 和 decodeAudioData 方法。
步骤如下：
- 使用 fetch 获取音频资源
- 将响应转为 ArrayBuffer
- 通过 audioContext.decodeAudioData 解码为音频缓冲区
- 创建 BufferSource 节点并连接到扬声器
async function playSound(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();
}
实时音频处理：增益与滤波
Web Audio API 支持构建音频节点图，实现动态效果。常见的处理包括调节音量（增益）和应用低通/高通滤波。
例如，使用 GainNode 控制音量：
const gainNode = audioContext.createGain(); gainNode.gain.value = 0.5; // 设置为一半音量 source.connect(gainNode); gainNode.connect(audioContext.destination);
使用 BiquadFilterNode 添加低通滤波：
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 frequencyData = new Uint8Array(bufferLength);
// 在动画循环中读取数据
function draw() {
requestAnimationFrame(draw);
analyser.getByteFrequencyData(frequencyData);
// 将 frequencyData 绘制到 canvas
}
draw();
基本上就这些。Web Audio API 灵活但细节多，掌握核心节点和连接逻辑后，就能实现播放控制、音效处理和视觉反馈。实际开发中注意兼容性和性能，避免频繁创建/销毁节点。不复杂但容易忽略的是音频上下文的激活时机和跨域音频资源的 CORS 问题。
