Audio Router

Routes to 3 specialized skills based on audio requirements.

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

Quick Route

Tier 1: Core Skills

Need	Skill	Signals
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

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"

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

Common Combinations

Simple Audio Player (1 skill)

audio-playback → Load and play audio files

Audio Visualizer (3 skills)

audio-playback → Load and control audio
audio-analysis → Extract frequency/beat data
audio-reactive → Map data to visual properties

Background Music (1-2 skills)

audio-playback → Looping, crossfade, volume
audio-analysis → Optional: beat sync features

Beat-Synced Animation (2-3 skills)

audio-analysis → Beat detection
audio-reactive → Trigger animations on beat
audio-playback → Control playback

Decision Table

Task	Primary Skill	Supporting Skills
Play music file	playback	-
Loop ambient sound	playback	-
Create visualizer	reactive	playback + analysis
Detect beats	analysis	playback
Pulse on bass	reactive	analysis + playback
Frequency spectrum display	analysis	playback
Sound effects	playback	-
Audio-reactive particles	reactive	analysis + playback
Volume meter	analysis	playback

Integration with Other Domains

With Post-Processing (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.

With 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.

With GSAP (gsap-*)

audio-analysis → Beat detection
audio-reactive → Timeline control
gsap-sequencing → Beat-synced timeline

Audio events trigger or scrub GSAP timelines.

With 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.

With 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.

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

Beat-Reactive Experience

1. audio-playback → Load audio
2. audio-analysis → Configure beat detection
3. audio-reactive → Define beat response animations

Ambient Soundscape

1. audio-playback → Looping players, crossfade
   (Single skill usually sufficient)

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

Quick Reference

Task → Skills

Task	Skills 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

Audio Library Quick Reference

Library	Use Case
Tone.js	Full audio synthesis, analysis, effects
Howler.js	Simple playback, sprites, mobile
Web Audio API	Low-level, custom processing

Common Frequency Bands

Band	Range	Visual Use
Sub-bass	20-60 Hz	Deep pulses, rumble
Bass	60-250 Hz	Scale, intensity, beat
Low-mid	250-500 Hz	Background motion
Mid	500-2000 Hz	General energy
High-mid	2000-4000 Hz	Detail, sparkle
High	4000+ Hz	Shimmer, aberration

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

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