需先连接音频源并调用getByteFrequencyData()才能获取频谱数据，fftSize须为2的幂且Uint8Array长度等于frequencyBinCount，配合requestAnimationFrame复用数组高效绘制。
用 analyserNode 拿到频谱数据，不是直接读 audioContext
很多人卡在第一步：以为调用 audioContext.createAnalyser() 就能立刻拿到频谱。其实它只是个“数据出口”，必须先连上音频源（比如 mediaElementSource 或 oscillator），再用 analyserNode.getByteFrequencyData() 主动拉取——不调用就不会更新。
常见错误现象：Uint8Array 里全是 0，或数值恒定不变。原因通常是：没接通音频流、没调用 getByteFrequencyData()、或分析器的 fftSize 和数组长度不匹配。
-
analyserNode.fftSize必须是 2 的幂（如 256、512、1024），且getByteFrequencyData()传入的Uint8Array长度必须等于analyserNode.frequencyBinCount（即fftSize / 2） - 记得设
analyserNode.smoothingTimeConstant = 0.8，否则跳变太剧烈，频谱抖得看不清 - 如果用
标签，要等loadeddata事件后再创建mediaElementSource，否则报错InvalidStateError
Canvas 绘制频谱条时，requestAnimationFrame 节奏比 setInterval 更稳
频谱动画本质是高频重绘（通常 30–60 fps），用 setInterval 容易和屏幕刷新率不同步，出现卡顿或撕裂。必须用 requestAnimationFrame 驱动绘制循环，并在里面调用 getByteFrequencyData()。
性能影响明显：若在每次绘制中新建 Uint8Array，GC 压力大；应复用同一数组实例。另外，canvas.getContext('2d') 的 clearRect() 不必清全画布——只清频谱区域即可，减少渲染开销。
- 示例片段：
const freqData = new Uint8Array(analyser.frequencyBinCount); function draw() { analyser.getByteFrequencyData(freqData); // 复用 freqData ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i - 注意：频谱数据范围是 0–255，但人耳对低频更敏感，可对前 1/3 索引做指数映射（如
Math.pow(freqData[i], 1.2)）让低频柱更明显
移动端 Safari 上 AudioContext 必须由用户手势触发
iOS/iPadOS 的 Safari 对自动播放限制极严：未响应用户点击/触摸前，AudioContext 无法进入运行态，analyserNode 数据永远为 0。这不是 bug，是策略。
错误现象：PC 正常，手机上频谱不动，控制台无报错，但 audioContext.state 是 suspended。此时调 getByteFrequencyData() 返回全 0 数组，且不会抛异常。
- 必须在按钮
click或touchstart回调里调用audioContext.resume() - 不能写成
audioContext = new AudioContext()后立刻连接分析器——要等 resume 完成后再连，否则连接失败 - 部分安卓 WebView 也有类似限制，建议统一按此逻辑处理
想让频谱“有呼吸感”，关键在 smoothingTimeConstant 和数据缩放
默认 smoothingTimeConstant = 0.8 让频谱平滑但反应慢；设成 0.2 又太跳。真实音乐可视化需要分层处理：低频（0–200Hz）响应稍缓，中高频（2k–8kHz）跟得紧些——但 Web Audio API 不支持按频段单独设 smoothing，只能靠后处理模拟。
容易被忽略的点：原始频谱数据是线性分布的，但人耳感知接近对数。直接按索引均匀画柱，会发现低频挤成一团、高频稀疏无力。解决方法不是改 FFT，而是重映射索引。
- 用
Math.floor(Math.log(i + 1) * scale)把线性索引转为对数索引，再查值（需预生成映射表） - 避免每帧都算对数——提前建好
logMap = new Uint32Array(binCount)，运行时只查表 - 如果用
createMediaStreamDestination()录制可视化画面，注意它不捕获 canvas 绘制内容，只录音频流本身
实际做下来，最难的不是画几根柱子，而是让频谱既跟得上节奏又不炸眼，这需要反复调 smoothingTimeConstant、数据缩放系数、以及 canvas 清屏范围——这些参数没有标准值，得贴着你的音频素材和目标设备试。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
