Back to Details

audio-router

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Audio Router

音频路由工具

Routes to 3 specialized skills based on audio requirements.
根据音频需求路由至3个专业技能模块。

Routing Protocol

路由协议

  1. Classify — Identify audio task from user request
  2. Match — Apply signal matching rules below
  3. Combine — Audio-visual projects need 2-3 skills together
  4. Load — Read matched SKILL.md files before implementation
  1. 分类 — 从用户请求中识别音频任务
  2. 匹配 — 应用以下信号词匹配规则
  3. 组合 — 音视频项目需结合2-3个技能模块
  4. 加载 — 在实现前读取匹配的SKILL.md文件

Quick Route

快速路由

Tier 1: Core Skills

一级：核心技能

NeedSkillSignals
Playing audio, music, SFX
audio-playback
play, load, music, sound, mp3, transport, player, loop
Extracting audio data
audio-analysis
FFT, frequency, spectrum, amplitude, waveform, beat detection
Visual-audio connection
audio-reactive
visualizer, reactive, respond to audio, sync, pulse, beat-driven
需求技能信号词
播放音频、音乐、音效
audio-playback
play, load, music, sound, mp3, transport, player, loop
提取音频数据
audio-analysis
FFT, frequency, spectrum, amplitude, waveform, beat detection
音画关联
audio-reactive
visualizer, reactive, respond to audio, sync, pulse, beat-driven

Signal Matching

信号词匹配

Primary Signals

核心信号词

audio-playback:
  • "play audio", "load music", "sound effect"
  • "Tone.js", "Player", "transport"
  • "loop", "crossfade", "volume"
  • "schedule", "timing", "sync to beat"
  • "background music", "ambient sound"
audio-analysis:
  • "FFT", "frequency", "spectrum"
  • "beat detection", "amplitude"
  • "waveform", "audio data"
  • "frequency bands", "bass", "treble"
  • "analyze", "extract", "measure"
audio-reactive:
  • "visualizer", "audio reactive"
  • "respond to music", "sync visuals"
  • "pulse on beat", "frequency to color"
  • "music driven", "audio visualization"
  • "bloom on bass", "particles on beat"
audio-playback:
  • "play audio", "load music", "sound effect"
  • "Tone.js", "Player", "transport"
  • "loop", "crossfade", "volume"
  • "schedule", "timing", "sync to beat"
  • "background music", "ambient sound"
audio-analysis:
  • "FFT", "frequency", "spectrum"
  • "beat detection", "amplitude"
  • "waveform", "audio data"
  • "frequency bands", "bass", "treble"
  • "analyze", "extract", "measure"
audio-reactive:
  • "visualizer", "audio reactive"
  • "respond to music", "sync visuals"
  • "pulse on beat", "frequency to color"
  • "music driven", "audio visualization"
  • "bloom on bass", "particles on beat"

Confidence Scoring

置信度评分

  • High (3+ signals) — Route directly to matched skill
  • Medium (1-2 signals) — Route with supporting skills
  • Low (0 signals) — Start with 
    audio-playback
  • 高（3个及以上信号词） — 直接路由至匹配的技能模块
  • 中（1-2个信号词） — 搭配辅助技能模块路由
  • 低（0个信号词） — 从
    audio-playback
    开始

Common Combinations

常见组合

Simple Audio Player (1 skill)

简单音频播放器（1个技能）

audio-playback → Load and play audio files
audio-playback → 加载并播放音频文件

Audio Visualizer (3 skills)

音频可视化工具（3个技能）

audio-playback → Load and control audio
audio-analysis → Extract frequency/beat data
audio-reactive → Map data to visual properties
audio-playback → 加载并控制音频
audio-analysis → 提取频率/节拍数据
audio-reactive → 将数据映射至视觉属性

Background Music (1-2 skills)

背景音乐（1-2个技能）

audio-playback → Looping, crossfade, volume
audio-analysis → Optional: beat sync features
audio-playback → 循环播放、淡入淡出、音量控制
audio-analysis → 可选：节拍同步功能

Beat-Synced Animation (2-3 skills)

节拍同步动画（2-3个技能）

audio-analysis → Beat detection
audio-reactive → Trigger animations on beat
audio-playback → Control playback
audio-analysis → 节拍检测
audio-reactive → 触发节拍同步动画
audio-playback → 控制播放

Decision Table

决策表

TaskPrimary SkillSupporting Skills
Play music fileplayback-
Loop ambient soundplayback-
Create visualizerreactiveplayback + analysis
Detect beatsanalysisplayback
Pulse on bassreactiveanalysis + playback
Frequency spectrum displayanalysisplayback
Sound effectsplayback-
Audio-reactive particlesreactiveanalysis + playback
Volume meteranalysisplayback
任务核心技能辅助技能
播放音乐文件playback-
循环环境音playback-
创建可视化工具reactiveplayback + analysis
检测音乐节拍analysisplayback
随低音脉冲reactiveanalysis + playback
显示频率频谱analysisplayback
音效播放playback-
音频响应粒子效果reactiveanalysis + playback
音量仪表analysisplayback

Integration with Other Domains

与其他领域的集成

With Post-Processing (postfx-*)

与后期处理（postfx-*）集成

audio-analysis → Bass/high frequency data
audio-reactive → Mapping strategy
postfx-bloom → Audio-reactive glow intensity
postfx-effects → Audio-reactive chromatic aberration
Audio drives post-processing parameters.
audio-analysis → 低/高频数据
audio-reactive → 映射策略
postfx-bloom → 音频响应发光强度
postfx-effects → 音频响应色差效果
音频驱动后期处理参数。

With Particles (particles-*)

与粒子系统（particles-*）集成

audio-analysis → Beat detection, energy levels
audio-reactive → Emission rate mapping
particles-systems → Particle emitter configuration
Beats trigger particle bursts, energy controls speed.
audio-analysis → 节拍检测、能量级别
audio-reactive → 发射速率映射
particles-systems → 粒子发射器配置
节拍触发粒子爆发，能量控制运动速度。

With GSAP (gsap-*)

与GSAP（gsap-*）集成

audio-analysis → Beat detection
audio-reactive → Timeline control
gsap-sequencing → Beat-synced timeline
Audio events trigger or scrub GSAP timelines.
audio-analysis → 节拍检测
audio-reactive → 时间轴控制
gsap-sequencing → 节拍同步时间轴
音频事件触发或控制GSAP时间轴。

With R3F (r3f-*)

与R3F（r3f-*）集成

audio-playback → Audio context in React
audio-analysis → Data extraction
audio-reactive → Update Three.js objects
r3f-fundamentals → Scene/mesh setup
Audio data animates 3D scene properties.
audio-playback → React中的音频上下文
audio-analysis → 数据提取
audio-reactive → 更新Three.js对象
r3f-fundamentals → 场景/网格设置
音频数据驱动3D场景属性动画。

With Shaders (shaders-*)

与着色器（shaders-*）集成

audio-analysis → Frequency uniforms
audio-reactive → Uniform update strategy
shaders-uniforms → Pass audio data to shaders
FFT data becomes shader uniforms for custom effects.
audio-analysis → 频率 uniforms
audio-reactive → Uniform更新策略
shaders-uniforms → 向着色器传递音频数据
FFT数据作为着色器uniform实现自定义效果。

Workflow Patterns

工作流模式

Visualizer Development

可视化工具开发

1. audio-playback → Set up player and audio context
2. audio-analysis → Configure analyzers and band extraction
3. audio-reactive → Map frequencies to visual properties
1. audio-playback → 设置播放器和音频上下文
2. audio-analysis → 配置分析器和频段提取
3. audio-reactive → 将频率映射至视觉属性

Beat-Reactive Experience

节拍响应体验开发

1. audio-playback → Load audio
2. audio-analysis → Configure beat detection
3. audio-reactive → Define beat response animations
1. audio-playback → 加载音频
2. audio-analysis → 配置节拍检测
3. audio-reactive → 定义节拍响应动画

Ambient Soundscape

环境音场景开发

1. audio-playback → Looping players, crossfade
   (Single skill usually sufficient)
1. audio-playback → 循环播放器、淡入淡出
   （通常单个技能即可满足需求）

Temporal Collapse Stack

Temporal Collapse Stack（新年倒计时音频体验）

For the New Year countdown audio experience:
audio-playback → Cosmic ambient loop, countdown ticks, celebration
audio-analysis → Beat detection, bass/mid/high extraction
audio-reactive → Map to bloom, particles, digit glow, vignette
Key features:
  • Background cosmic ambient audio (looped)
  • Tick sound per second (intensifies in final 10)
  • Beat detection for particle bursts
  • Bass → bloom intensity
  • High frequencies → chromatic aberration
  • Celebration music at zero
audio-playback → 宇宙环境音循环、倒计时滴答声、庆祝音效
audio-analysis → 节拍检测、低/中/高频提取
audio-reactive → 映射至bloom效果、粒子、数字发光、暗角
关键特性：
  • 背景宇宙环境音（循环播放）
  • 每秒滴答声（最后10秒逐渐增强）
  • 节拍检测触发粒子爆发
  • 低频 → bloom强度
  • 高频 → 色差效果
  • 零点时播放庆祝音乐

Quick Reference

快速参考

Task → Skills

任务 → 所需技能

TaskSkills Needed
"Play background music"playback
"Loop ambient sound"playback
"Crossfade between tracks"playback
"Show frequency spectrum"analysis + playback
"Detect beats in music"analysis + playback
"Make visuals react to audio"reactive + analysis + playback
"Pulse element on beat"reactive + analysis
"Audio-reactive bloom"reactive + analysis
"Sound effects on events"playback
任务所需技能
"播放背景音乐"playback
"循环环境音"playback
"轨道间淡入淡出"playback
"显示频率频谱"analysis + playback
"检测音乐节拍"analysis + playback
"实现视觉效果随音频响应"reactive + analysis + playback
"元素随节拍脉冲"reactive + analysis
"音频响应bloom效果"reactive + analysis
"事件触发音效"playback

Audio Library Quick Reference

音频库快速参考

LibraryUse Case
Tone.jsFull audio synthesis, analysis, effects
Howler.jsSimple playback, sprites, mobile
Web Audio APILow-level, custom processing
库适用场景
Tone.js完整音频合成、分析、效果处理
Howler.js简单播放、精灵音效、移动端适配
Web Audio API底层自定义处理

Common Frequency Bands

常见频段

BandRangeVisual Use
Sub-bass20-60 HzDeep pulses, rumble
Bass60-250 HzScale, intensity, beat
Low-mid250-500 HzBackground motion
Mid500-2000 HzGeneral energy
High-mid2000-4000 HzDetail, sparkle
High4000+ HzShimmer, aberration
频段范围视觉应用
超低音20-60 Hz深度脉冲、震动效果
低音60-250 Hz缩放、强度、节拍同步
中低音250-500 Hz背景运动效果
中音500-2000 Hz整体能量表现
中高音2000-4000 Hz细节、闪烁效果
高音4000+ Hz微光、色差效果

Fallback Behavior

降级处理逻辑

  • No specific signals → Start with 
    audio-playback
  • "Visualizer" mentioned → Full stack: all three skills
  • "React to music" → 
    audio-reactive
    + 
    audio-analysis
  • Just playing audio → 
    audio-playback
    only
  • Performance concerns → Focus on 
    audio-analysis
    optimization
  • 无特定信号词 → 从
    audio-playback
    开始
  • 提及"Visualizer" → 全栈：使用所有三个技能模块
  • 提及"React to music" → 
    audio-reactive
    + 
    audio-analysis
  • 仅需播放音频 → 仅使用
    audio-playback
  • 关注性能 → 重点优化
    audio-analysis

Performance Priority

性能优化优先级

When performance is critical:
  1. audio-analysis
    — Use smaller FFT size (64-128)
  2. audio-reactive
    — Apply smoothing to reduce jitter
  3. audio-playback
    — Preload audio, reuse players
当性能要求较高时：
  1. audio-analysis
    — 使用较小的FFT尺寸（64-128）
  2. audio-reactive
    — 应用平滑处理减少抖动
  3. audio-playback
    — 预加载音频、复用播放器