核心链路 · 实时
音乐进来,经过这条链,最后只剩一句话:JS 写变量,CSS 画帧。
01 · INPUT
音源
本地文件 / 合成节拍 → WebAudio 节点图
02 · FFT
AnalyserNode
getByteFrequencyData · 2048 → 1024 bins
03 · FEATURES
算特征
分频段能量 + RMS + 自适应阈值节拍
04 · CSS VARS
写 CSS 变量
setProperty 到 #stage —— JS 到此为止
05 · CSS FRAME
纯 CSS 帧
calc() 读变量 → transform/filter,零 JS 动画
整条链每帧跑一次:音源 → FFT → 特征 → 写变量。
第 05 段那颗球没有任何 JS 在逐帧改它 —— 它只是 CSS 在读上面写好的变量,自己动。
这就是命题:把时钟换成音乐,JS 只负责喂特征。