Web Audio API通过AudioContext管理音频处理，利用节点连接实现播放、滤波和分析；使用AnalyserNode可获取频域及时域数据，结合Canvas绘制实时频谱图，完成音频可视化。
Web Audio API 是浏览器提供的强大工具，能让你在网页中处理、合成和分析音频。它不仅支持播放声音，还能实时获取音频数据、应用滤波器、实现音效，甚至进行频谱分析。下面介绍如何使用它来处理和分析音频数据。
创建音频上下文并加载音频
所有操作都从 AudioContext 开始。这是整个 Web Audio API 的核心，用来管理音频节点和处理流程。
示例代码：
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
<p>// 加载音频文件
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; // 降低一半音量 <p>const source = audioContext.createBufferSource(); source.buffer = audioBuffer; source.connect(gainNode); gainNode.connect(audioContext.destination);</p><p>source.start();
使用 AnalyserNode 分析音频数据
想要获取音频的波形或频率信息，需要使用 AnalyserNode。它可以实时输出时域或频域数据。
Blender Geometry Nodes Script Generator
下载
生成Blender Python (bpy)脚本，该脚本使用node_groups API和GeometryNodeTree接口程序化地创建几何节点修改器树，用于参数化3D资产生成。
设置方法：
const analyser = audioContext.createAnalyser(); analyser.fftSize = 2048; <p>// 连接到处理链 source.connect(analyser); analyser.connect(audioContext.destination);</p><p>// 创建数据数组 const bufferLength = analyser.frequencyBinCount; const frequencyData = new Uint8Array(bufferLength); const timeDomainData = new Uint8Array(bufferLength);
在动画循环中读取数据：
function analyze() {
requestAnimationFrame(analyze);
<p>// 获取频谱数据（0-255）
analyser.getByteFrequencyData(frequencyData);</p><p>// 获取波形数据
analyser.getByteTimeDomainData(timeDomainData);</p><p>// 可视化处理，例如画到 canvas
drawSpectrum(frequencyData);
}</p><p>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;
<p>ctx.fillStyle = 'black';
ctx.fillRect(0, 0, width, height);</p><p>ctx.lineWidth = 2;
ctx.strokeStyle = 'lime';
ctx.beginPath();</p><p>const sliceWidth = width / data.length;
let x = 0;</p><p>for (let i = 0; i < data.length; i++) {
const v = data[i] / 128.0;
const y = (v * height) / 2;</p><pre class="brush:php;toolbar:false;">if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
x += sliceWidth;
}
ctx.lineTo(width, height / 2); ctx.stroke(); }
基本上就这些。掌握 AudioContext、节点连接和 AnalyserNode 后，你就能处理大多数音频任务。无论是做音乐可视化、语音分析还是浏览器音效，这套机制都很实用。关键是理解数据流动路径，避免内存泄漏（比如及时停止 source）。不复杂但容易忽略细节。
