Web Audio API音频可视化需三步：正确连接音频流、准确获取频谱数据、高效Canvas渲染。AudioContext须由用户手势触发，analyser需显式配置fftSize和smoothingTimeConstant，Uint8Array长度须等于frequencyBinCount，渲染用requestAnimationFrame并复用缓冲区。
用 Web Audio API 做音频可视化，核心就三件事：连对音频流、拿稳频谱数据、画得跟得上节奏。不靠第三方库，浏览器原生就能跑，但细节错一点，频谱就全黑或乱跳。
AudioContext 必须由用户手势触发
iOS Safari 和新版 Chrome 都强制要求：AudioContext 只能在 click、touchstart 等用户交互回调里创建。否则状态一直是 suspended，analyser 读出来全是 0，还不报错。
- 正确写法：给播放按钮加
onclick="initAudio()"，里面再new AudioContext() - audio 元素要等
loadeddata事件后，才能用createMediaElementSource(audioEl)接入，否则抛InvalidStateError - 移动端首次播放前，建议调一次
audioContext.resume()显式唤醒（尤其 Safari）
AnalyserNode 配置不能只写默认值
analyser 不是“一建就灵”，必须显式设置关键参数，否则数据不准、响应迟钝或根本不动。
-
fftSize设为 2048（2 的幂），对应frequencyBinCount = 1024个频点；太小（如 256）分辨率低，太大（如 4096）延迟高 -
smoothingTimeConstant = 0.8—— 抑制瞬时抖动，让频谱过渡自然；设为 0 就是原始 FFT，人眼根本跟不上 - 务必把 analyser 同时连到 destination：
analyser.connect(audioContext.destination)，否则声音会消失 - Uint8Array 缓冲区长度必须严格等于
analyser.frequencyBinCount，不能硬写 256 或 1024
Canvas 渲染要省资源、保帧率
每秒 60 次重绘，稍不注意就掉帧。重点不是画得多炫，而是每次只做必要操作。
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame驱动，别用setInterval；动画节奏和屏幕刷新同步 - 复用同一个
Uint8Array实例读数据，避免频繁 GC - 频谱图只需更新柱子高度：用
fillRect(x, y, width, height)，比beginPath + lineTo快 5–10 倍 - 清画布别全清：
clearRect(0, 0, canvas.width, canvas.height)改成只清顶部区域或逐列擦除 - 低频（0–30 bin）可做指数映射：
Math.pow(value, 1.2)，让人耳敏感的鼓点更突出
常见问题快速定位
频谱不动？全黑？乱跳？先查这四点：
- 控制台打
audioContext.state—— 不是running就是没唤醒 - 检查 analyser 是否已
connect()到 source 和 destination - 打印
analyser.frequencyBinCount和你传入的 Uint8Array.length，必须相等 - 在
draw()函数开头加console.log(freqData[0], freqData[100])，确认是否真在更新
