Web Audio API 提供浏览器内音频处理能力，通过 AudioContext 管理音频节点，支持加载、播放、分析音频及麦克风输入。使用 fetch 和 decodeAudioData 加载音频，AudioBufferSourcenode 播放，GainNode 或 BiquadFilterNode 调节音量或滤波。AnalyserNode 可获取频率与波形数据，用于可视化。结合 getUserMedia 可实时分析麦克风输入。需注意上下文激活限制与采样率一致性。
Web Audio API 是浏览器提供的强大工具，用于处理和分析音频。它允许开发者在网页中生成、控制、混合以及实时分析音频信号。无论是音乐可视化、语音识别预处理，还是音频特效制作，Web Audio API 都能胜任。
创建音频上下文与加载音频
所有音频操作都始于 AudioContext。这是整个音频处理的入口点。
示例代码：
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
要加载远程音频文件，可以使用 fetch 获取数据，再用 decodeAudioData 解码：
<code>fetch('sound.mp3') .then(response => response.arrayBuffer()) .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer)) .then(audioBuffer => { // 音频已准备好，可进行播放或分析 });
音频播放与节点连接
通过 AudioBufferSourceNode 播放音频数据：
const source = audioContext.createBufferSource(); source.buffer = audioBuffer; // 上一步解码得到的数据 source.connect(audioContext.destination); // 连接到扬声器 source.start(); // 开始播放
你可以插入多个处理节点，如增益（GainNode）、滤波器（BiquadFilterNode）等，实现音量调节或低通滤波：
const gainNode = audioContext.createGain(); gainNode.gain.value = 0.5; // 半音量 source.connect(gainNode); gainNode.connect(audioContext.destination);
实时音频分析：使用 AnalyserNode
若需获取音频的频率或波形数据，AnalyserNode 是关键。它可以输出时域或频域数据，常用于可视化。
const analyser = audioContext.createAnalyser(); analyser.fftSize = 2048; source.connect(analyser); analyser.connect(audioContext.destination);
获取频率数据：
const bufferLength = analyser.frequencyBinCount; const frequencyData = new Uint8Array(bufferLength); analyser.getByteFrequencyData(frequencyData); // 填充频率数组
获取波形数据：
const timeDomainData = new Uint8Array(bufferLength); analyser.getByteTimeDomainData(timeDomainData); // 填充波形数组
这些数据可用于 canvas 绘制频谱图或波形动画。
处理麦克风输入
结合 navigator.mediaDevices.getUserMedia，可实时分析用户麦克风输入：
navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { const source = audioContext.createMediaStreamSource(stream); const analyser = audioContext.createAnalyser(); source.connect(analyser); // 实时分析麦克风数据 const dataArray = new Uint8Array(analyser.frequencyBinCount); function analyze() { analyser.getByteTimeDomainData(dataArray); // 处理数据，比如检测声音强度 requestAnimationFrame(analyze); } analyze(); });
基本上就这些。Web Audio API 提供了灵活的模块化结构，适合各种音频任务。掌握核心节点和数据流机制后，就能构建复杂的音频应用。不复杂但容易忽略细节，比如采样率一致性或上下文激活问题（部分浏览器要求用户交互后才能启动音频）。