AudioContext + AnalyserNode 是浏览器音频可视化的唯一可行路径，必须接入 Web Audio API 处理图；getByteFrequencyData() 因返回 FFT 频域数据更常用；fftSize 需为 2 的幂（如 1024），frequencyBinCount = fftSize / 2；需在 requestAnimationFrame 中循环调用获取实时数据，并调低 smoothingTimeConstant 提升节拍响应。
AudioContext + AnalyserNode 是唯一可行路径
浏览器里做音频可视化，绕不开 AudioContext 和它的 AnalyserNode。其他方式（比如直接读取 <audio> 元素的播放进度）只能拿到时间戳，拿不到频谱或波形数据。必须把音频流接入 Web Audio API 的处理图，再用 AnalyserNode 抽取实时分析数据。
为什么 getByteFrequencyData() 比 getByteTimeDomainData() 更常用
多数可视化效果（柱状频谱、圆环频谱、粒子响应）依赖频率分布，而非原始波形。虽然两者都返回 Uint8Array，但：
-
getByteFrequencyData()返回的是 FFT 计算后的频域数据，索引对应不同频段（如 0–100Hz、100–200Hz…），值是该频段能量强度（0–255） -
getByteTimeDomainData()返回的是时域波形采样点（类似 oscilloscope），只有 2048 个点，细节少、节奏感弱 - 前者对音乐节奏/鼓点更敏感，后者更适合显示“有没有声音”这种粗粒度状态
常见卡点：analyser.fftSize 必须是 2 的幂，且影响分辨率与性能
fftSize 决定频谱精度和计算开销，不是越大越好。设为 256、512、1024 或 2048 才合法；设成 300 会静默失败，analyser.frequencyBinCount 仍为默认值 128，导致 getByteFrequencyData() 填不满你传入的数组。
const analyser = audioCtx.createAnalyser(); analyser.fftSize = 1024; // ✅ 合法 // analyser.fftSize = 1000; // ❌ 不报错但无效 console.log(analyser.frequencyBinCount); // 输出 512（= fftSize / 2）
注意：frequencyBinCount 是实际可用频段数，等于 fftSize / 2。传给 getByteFrequencyData() 的 Uint8Array 长度必须 ≥ 这个值，否则只填充前 N 个元素。
立即学习“Java免费学习笔记（深入）”；
requestAnimationFrame 中反复调用 getData() 才能拿到新数据
AnalyserNode 不主动推送数据，必须手动拉取。放在 requestAnimationFrame 里是最稳妥的选择——它和屏幕刷新同步，既避免过度采样，也防止丢帧。
const bufferLength = analyser.frequencyBinCount;
const frequencyData = new Uint8Array(bufferLength);
function render() {
analyser.getByteFrequencyData(frequencyData); // ✅ 每帧更新一次
drawBars(frequencyData); // 你的绘制逻辑
requestAnimationFrame(render);
}
render();
别用 setInterval：可能和音频处理线程不同步，导致数据陈旧或跳变；也别在 audio.onplay 里只调一次——那只是快照，不是实时流。
真正容易被忽略的是：analyser.smoothingTimeConstant 默认是 0.8，会让频谱变化显得“拖尾”。做节拍敏感效果时，得设成 0.2 甚至 0（完全不平滑），否则鼓点峰值会被抹掉。
