纯 css 动画无法响应真实音频，需 js 读取 analysernode 数据并通过 --freq-0 至 --freq-127 逐个绑定；ios 需确保 audiocontext.resume() 和节点连接，128 柱 css 方案性能差，推荐 canvas 绘制或精简至 8–16 柱。
为什么直接用 CSS 动画模拟频谱不靠谱
纯 CSS 的 @keyframes 动画（比如一堆 .audio37-block 随机跳动）只是视觉欺骗，和真实音频毫无关系。它无法响应音量变化、节拍强弱或频率分布，一旦音频换一首，动效就“脱节”。真正要驱动柱状图高度、颜色、延迟，得靠 JS 读取的实时数据——而 CSS 自定义属性是把 JS 数据“透传”给 CSS 的最轻量通道。
如何用 --freq-0 到 --freq-127 绑定 AnalyserNode 数据
关键不是声明变量，而是让每个频段值能被单个元素独立读取并响应。常见错误是只设一个 --freq 全局变量，结果所有柱子同步跳。
-
analyser.fftSize = 256后，getByteFrequencyData()返回 128 个字节（索引 0–127），正好对应 128 个 CSS 变量 - 在
requestAnimationFrame循环里，用document.documentElement.style.setProperty('--freq-' + i, data[i])逐个写入 - CSS 中用
height: calc(var(--freq-0) * 1px)这类表达式映射数值到尺寸，避免 JS 直接操作style.height - 必须加
transition: height 0.1s ease-out，否则柱子会“抽搐”而不是平滑起伏
iOS 上 var(--freq-0) 不更新？检查这三处
iOS Safari 对 CSS 自定义属性的计算时机更保守，尤其在 requestAnimationFrame 高频写入时容易卡住。
- 确保
analyser已连接到音频图：漏掉sourceNode.connect(analyser)或analyser.connect(audioContext.destination)，getByteFrequencyData()就永远返回全 0 - 移动端必须用户手势触发
audioContext.resume()，否则 AnalyserNode 不工作，变量始终为 0 - 不要在伪元素（如
audio::-webkit-media-controls）上依赖这些变量——iOS 不支持在 UA 伪元素中使用 CSS 变量
性能临界点：128 个变量 vs canvas 渲染
用 128 个 CSS 变量驱动 128 个 div 柱子，在低端安卓机上帧率会掉到 30fps 以下。这不是 CSS 能力问题，而是浏览器重排压力过大。
真正需要高精度频谱（比如音乐分析工具），应该用 <canvas></canvas> 手动绘制；只有 8–16 根柱子做基础动效时，CSS 变量方案才够快够稳。别为了“看起来高级”硬塞 128 根——人眼根本分辨不出第 64 根和第 65 根的区别，但手机会明显卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
