<audio>标签本身不能生成频谱图，需通过Web Audio API的AnalyserNode结合MediaElementAudioSourceNode接入音频流并手动读取频率数据绘制。
<audio> 标签本身不能直接生成频谱图，它只负责播放和基础控制。要实现音频可视化（比如跳动的频谱条、波形动画），必须通过 Web Audio API 的 AnalyserNode 拿到实时频率数据，而 <audio> 只是作为音频源——关键在于把它“接入”音频处理图。
必须连接音频流，否则频谱永远是 0
<audio> 元素只是 HTML 元素，不自动暴露频域数据。Web Audio API 需要把它包装成 MediaElementAudioSourceNode，再连入分析节点：
- 创建
AudioContext（注意：iOS Safari 等移动端必须在用户点击后调用context.resume()） - 用
context.createMediaElementSource(audioEl)获取音频源节点 - 创建
AnalyserNode，设置fftSize（推荐 2048 或 1024）和smoothingTimeConstant（推荐 0.8） - 显式连接：
source → analyser → context.destination - ❗漏掉任意一环（尤其是
source.connect(analyser)和analyser.connect(context.destination)），getByteFrequencyData()就会返回全 0 数组
数据读取和绘制要配合 requestAnimationFrame
AnalyserNode 不主动推送数据，你得每帧手动拉取：
- 提前创建
Uint8Array，长度严格等于analyser.frequencyBinCount（即fftSize / 2） - 在
requestAnimationFrame循环里调用analyser.getByteFrequencyData(freqData) -
freqData是 0–255 的对数压缩幅度值，可直接映射为柱状图高度 - Canvas 绘制建议用
fillRect批量画竖条，避免beginPath+lineTo开销大 - 清屏只需清频谱区域，不必
clearRect(0,0,w,h)全清，减少渲染压力
实际操作中几个易踩坑点
-
<audio>要等loadeddata或canplaythrough事件后再创建 source，否则报InvalidStateError -
fftSize必须是 2 的幂（如 256、512、2048），且Uint8Array长度必须匹配frequencyBinCount - 移动端 Safari 不允许自动启动
AudioContext，必须在click或touchstart回调里初始化并.resume() - 频谱默认是线性频率分布，但人耳感知接近对数，可对前 1/3 索引做
Math.pow(val, 1.2)增强低频表现 - 不要每次新建
Uint8Array，复用同一实例，减轻垃圾回收压力
本质上，<audio> 是入口，Web Audio API 是引擎，Canvas 是画布——三者各司其职，缺一不可。
立即学习“前端免费学习笔记（深入）”；
