Web Audio API通过AudioContext管理音频处理，利用节点连接实现播放、滤波和分析；使用AnalyserNode可获取频域及时域数据，结合Canvas绘制实时频谱图，完成音频可视化。
Web Audio API 是浏览器提供的强大工具，能让你在网页中处理、合成和分析音频。它不仅支持播放声音，还能实时获取音频数据、应用滤波器、实现音效，甚至进行频谱分析。下面介绍如何使用它来处理和分析音频数据。
创建音频上下文并加载音频
所有操作都从 AudioContext 开始。这是整个 Web Audio API 的核心，用来管理音频节点和处理流程。
示例代码：const audioContext = new (window.AudioContext || window.webkitAudioContext)();// 加载音频文件 async function loadAudio(url) { const response = await fetch(url); const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); return audioBuffer; }
fetch 获取音频文件后，用 decodeAudioData 解码成 AudioBuffer，之后就可以用于播放或分析。
连接节点进行音频处理
Web Audio API 使用模块化路由方式：通过连接不同的节点（如增益、滤波器、分析器）构建音频处理链。
常见处理节点包括：
- GainNode：调节音量
- BiquadFilterNode：实现低通、高通等滤波效果
- WaveShaperNode：添加失真等非线性效果
const gainNode = audioContext.createGain(); gainNode.gain.value = 0.5; // 降低一半音量const source = audioContext.createBufferSource(); source.buffer = audioBuffer; source.connect(gainNode); gainNode.connect(audioContext.destination);
source.start();
使用 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); const timeDomainData = new Uint8Array(bufferLength);
在动画循环中读取数据：
function analyze() {
requestAnimationFrame(analyze);
// 获取频谱数据（0-255）
analyser.getByteFrequencyData(frequencyData);
// 获取波形数据
analyser.getByteTimeDomainData(timeDomainData);
// 可视化处理，例如画到 canvas
drawSpectrum(frequencyData);
}
analyze();
实时可视化与交互
结合 Canvas API，可以将 frequencyData 或 timeDomainData 绘制成频谱图或声波动画。
简单绘制波形示例：
function drawSpectrum(data) {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, width, height);
ctx.lineWidth = 2;
ctx.strokeStyle = 'lime';
ctx.beginPath();
const sliceWidth = width / data.length;
let x = 0;
for (let i = 0; i < data.length; i++) {
const v = data[i] / 128.0;
const y = (v * height) / 2;
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
x += sliceWidth;
}
ctx.lineTo(width, height / 2);
ctx.stroke();
}
基本上就这些。掌握 AudioContext、节点连接和 AnalyserNode 后，你就能处理大多数音频任务。无论是做音乐可视化、语音分析还是浏览器音效，这套机制都很实用。关键是理解数据流动路径，避免内存泄漏（比如及时停止 source）。不复杂但容易忽略细节。
