SuperAPI AI 工具集

audio-reactive

前端与建站

查看项目

更新于 10-15 22:13

技能介绍

用途:在 HyperFrames 合成中,当音频数据可用时(经 extract-audio-data.py 提取或从 audio-data.json 载入),用音频驱动任意可被 GSAP 动画的视觉元素,如字幕、背景、形状、叠加层。

主要能力:数据格式为 AUDIO_DATA,含 fps(分析帧率)、totalFrames(总帧数)、frames 数组,每帧含 bands[],即归一化到 0–1 的频段振幅,索引 0 为低频,更高索引为中高频。可把频段与振幅映射到任意 GSAP 可补间属性:低频驱动 scale 形成节拍脉冲,高频驱动 textShadow/boxShadow 控制辉光,整体振幅驱动 opacity、y、backgroundColor,节拍起点驱动 scale、color、rotation,中频驱动 borderRadius、width、height。也支持 clipPath、filter、backgroundPosition、SVG 属性和自定义 CSS 属性。

使用方式:音频数据为静态 JSON,无 Web Audio API、无 AnalyserNode、无运行时麦克风输入,动画可重复且确定性。需在元素可见期内按 100–200ms 间隔多次采样并创建补间,例如每 150ms 用 getBass(t) 生成一个 tween,而非只用峰值创建单个 tween,否则观众无法感知反应性。

适用场景与限制:视觉表达应由内容(叙事、主题、情感)决定,音频只决定时机与强度;应避免频谱条、波形、示波器、VU 表、音符唱片、通用粒子、彩虹循环、白闪、抽象脉动球等仅表示“有音频”的媒介化元素。文字用 3–6% 缩放并配柔和辉光以免难读,非文字元素可 10–30% 缩放与大幅变换,能量需与内容匹配。禁止 Math.random() 或 Date.now()。不要给含半透明子元素的容器加 textShadow,低频脉冲的 scale 加在组容器,textShadow 只加在单个激活词元素。音频反应与其它动画共用同一 GSAP 时间轴。