动画引擎原理 总览待审核
Web Audio · FFT · audio-reactive

声音驱动:FFT 频谱与节拍

前面每一页的「值」都来自时间(补间)或物理(弹簧)。但驱动动画的信号也可以来自外部——比如声音。 Web Audio 的 AnalyserNode 对正在播放的音频做快速傅里叶变换 (FFT),每一帧给出一条频谱 (各频段的能量),把它喂给视觉即得「随声而动」:低频(鼓点 kick)驱动中心脉冲的缩放,中高频驱动频谱条的起伏。 本页在页内合成一段循环节拍(无需上传音频、也不申请麦克风权限),实时分析它来驱动下面的可视化。 浏览器要求音频由用户手势启动,所以先点「播放」。

低频 (kick) 0 中频 0 高频 (hat) 0
FFT 把波形拆成频谱。时域里声音是一条随时间起伏的振幅曲线;AnalyserNode 用 FFT 把 一小段波形变换到频域,得到「每个频率上有多少能量」。fftSize = 256 给出 128 个频段, getByteFrequencyData 每帧把它们填进一个 Uint8Array (0–255)。视觉只需选几个频段 映射到属性:低频段均值 → 脉冲缩放、各频段 → 频谱条高度。smoothingTimeConstant 让相邻帧的频谱平滑、 不抖。整条分析图自身就是一个「无尽、由外部信号驱动」的动画源,与噪声同属此类。
Web Audio — 取频谱、映射到视觉

  


  

    声音是「外部信号驱动」的一种;噪声是「内部程序化信号」的一种——两者都不走
    时间补间,却同样能源源不断地驱动动画。落定的手感与映射曲线仍可借缓动整形
    (如对能量值再过一条 easeOut,让脉冲回落更柔和)。