Web Audio API通过AudioContext和AnalyserNode实现音频实时分析，可获取频率与时域数据用于可视化等场景。首先创建AudioContext和AnalyserNode，并设置fftSize以调整频率分辨率；随后将analyser节点插入音频链，连接音频源与输出设备。利用getByteFrequencyData()和getByteTimeDomainData()方法分别获取频率分布和波形数据，需配合Uint8Array存储。常见应用如结合Canvas绘制频谱图，在动画循环中持续更新数据实现动态视觉效果。该机制适用于音乐可视化、音量检测及交互反馈，核心在于掌握数据获取时机与渲染同步。
Web Audio API 不仅能播放和控制音频，还能对音频进行实时分析。通过 AudioContext 和 AnalyserNode，你可以获取音频的频率和时域数据，用于可视化或音量检测等场景。
创建音频上下文与分析节点
要开始分析音频，首先需要一个 AudioContext，然后创建一个 AnalyserNode 来处理音频流。
const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const analyser = audioContext.createAnalyser(); analyser.fftSize = 2048; // 设置FFT大小，影响频率分辨率
将分析节点插入音频节点链中，比如连接到音频源（如 元素、麦克风输入或音频缓冲）：
// 假设你有一个 audio 元素
const audioElement = document.getElementById('myAudio');
const source = audioContext.createMediaElementSource(audioElement);
source.connect(analyser);
analyser.connect(audioContext.destination); // 继续输出到扬声器
获取频率和波形数据
AnalyserNode 提供两个主要方法来获取数据：
- getByteFrequencyData()：获取当前频率分布（单位：Hz），值范围 0–255
- getByteTimeDomainData()：获取波形振幅数据，用于绘制声波图
你需要创建数组来接收这些数据：
const bufferLength = analyser.frequencyBinCount; const frequencyData = new Uint8Array(bufferLength); const timeData = new Uint8Array(bufferLength);// 在动画循环中更新数据 function update() { analyser.getByteFrequencyData(frequencyData); analyser.getByteTimeDomainData(timeData); // 可在此处绘图或处理数据 requestAnimationFrame(update); } update();
常见用途：音频可视化
结合 Canvas 可以实现简单的频谱图或声波动画。
例如，绘制频率柱状图：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function drawSpectrum() {
requestAnimationFrame(drawSpectrum);
analyser.getByteFrequencyData(frequencyData);
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
const barWidth = (canvas.width / bufferLength) * 2.5;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const barHeigh
t = frequencyData[i];
ctx.fillStyle = rgb(${barHeight + 100}, 50, 50);
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
}
drawSpectrum();
t = frequencyData[i];
ctx.fillStyle = 基本上就这些。Web Audio API 的分析功能强大且灵活，适合做音乐可视化、语音识别预处理或交互式声音反馈。关键是理解 AnalyserNode 的数据输出方式，并配合定时更新来实现实时效果。
