audio-reactive
audio-reactive lets you create dynamic visual experiences synchronized to sound. Tap into music frequencies and beat detection to drive animations, lighting, and effects that pulse with your audio. Perfect for live performances, interactive installations, and immersive media projects.
audio-reactive is an MIT-licensed library for creating dynamic visual experiences synchronized to sound. It lets you tap into music frequencies and beat detection to drive animations, lighting, and effects that pulse with your audio. You can build music visualizers, live performance visuals, interactive installations, and immersive media projects where graphics respond in real-time to audio input.
AI-generated summary based on this skill's SKILL.md
Install
Bbeierle12/Skill-MCP-Claude/audio-reactive · repository language: JavaScript
git clone https://github.com/Bbeierle12/Skill-MCP-Claude
cp -r Skill-MCP-Claude/skills/audio-reactive ~/.claude/skills/audio-reactiveFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is audio-reactive and what can I build with it?
audio-reactive is an MIT-licensed library for creating dynamic visual experiences synchronized to sound. It lets you tap into music frequencies and beat detection to drive animations, lighting, and effects that pulse with your audio. You can build music visualizers, live performance visuals, interactive installations, and immersive media projects where graphics respond in real-time to audio input.
How does audio-reactive handle real-time audio visualization?
audio-reactive provides real-time FFT analysis and reactive animation capabilities to build music visualizers. It analyzes audio data on the fly, extracting frequency information and beat patterns that can trigger visual responses instantly. This enables you to create responsive graphics that react to music as it plays, from subtle frequency-based animations to dramatic beat-triggered effects.
Can I map audio data to visual properties like color and rotation?
Yes. audio-reactive lets you map audio data to visual properties including scale, color, rotation, and opacity. This means you can tie frequency ranges to specific visual attributes—for example, bass frequencies could control scale while mid-range frequencies drive color shifts. This flexible mapping approach lets you design custom audio-visual relationships tailored to your creative vision.
How do beat detection and triggered visual responses work?
audio-reactive implements beat detection that identifies rhythmic peaks in your audio, enabling triggered visual responses synchronized to the music's rhythm. When a beat is detected, you can fire animations, flash effects, particle bursts, or other visual events. This creates impactful moments where graphics respond directly to the song's pulse and energy.
Does audio-reactive work with Three.js and React Three Fiber?
audio-reactive integrates with Three.js and React Three Fiber, allowing you to build sophisticated 3D audio-reactive experiences. You can combine audio analysis with 3D graphics libraries to create immersive visualizations, from reactive geometry and bloom effects to particle systems and complex animations all driven by sound data.
What audio-driven effects can I create with this library?
audio-reactive supports a wide range of effects including beat flashes, pop animations, bloom effects, color shifts, particle systems, and audio smoothing/filtering. You can create frequency-to-visual mappings for subtle reactive graphics or dramatic beat-triggered effects. The library's flexible architecture lets you design custom audio-visual effects for performances, installations, and interactive media.
SKILL.md
rendered from the published skill — quoted content, verbatim
Audio Reactive Visuals
Connecting audio analysis to visual parameters.
Quick Start
import * as Tone from 'tone';
const analyser = new Tone.Analyser('fft', 256);
const player = new Tone.Player('/audio/music.mp3');
player.connect(analyser);
player.toDestination();
function animate() {
const fft = analyser.getValue();
const bass = (fft[2] + 100) / 100; // Normalize to 0-1
// Apply to visual
element.style.transform = `scale(${1 + bass * 0.2})`;
requestAnimationFrame(animate);
}
Core Patterns
Audio-to-Visual Mapping
```javascript class AudioReactiveMapper { constructor(analyser) { this.analyser = analyser; this.smoothers = { bass: new Smoother(0.85), mid: new Smoother(0.9), high: new Smoother(0.92) }; }
// Get values optimized for different visual properties getValues() { const fft = this.analyser.getValue(); const
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/audio-reactive/SKILL.md
skills/audio-reactive/_meta.json