Real-time audio-reactive visuals for live DJ performances
A browser-based audio visualizer with 20+ trippy effects, smooth transitions, and full keyboard control. Give it a try here https://audio-visualizer.griffen.codes/!
✨ Key Features
Core Visualizations
- 20+ unique effects spanning multiple categories:
- Classic modes: Spiral, Waveform, Kaleidoscope, Matrix, Tunnel
- Space themes: Galaxy, Nebula, Supernova, Black Hole, Constellation
- Abstract effects: Morphing Blobs, Liquid Waves, Fractal Noise, Energy Field
- DJ-focused: Oscilloscope, Spectrum, Vinyl, Laser, Plasma, Crystal, Strobe
- Real-time audio reactivity with adjustable sensitivity (0.1x – 3.0x)
- Smooth cross-fade transitions between modes with configurable timing
Performance & Control
- Quality presets (Low/Medium/High) that dynamically adjust complexity
- Auto-cycle mode with randomization and configurable duration (2 – 30s)
- Keyboard shortcuts for hands-free operation during performances
- 10 color themes from Rainbow to Cyberpunk to Cosmic
Developer Experience
- Component-based architecture with each visualization in its own file
- Custom hooks for microphone access, orchestration, and keyboard controls
- TypeScript throughout with shared interfaces and type safety
- Vercel Analytics integration tracking user interactions and mode preferences
Essential Keyboard Shortcuts
H— Hide/show UISpace— Toggle auto-cycleR— Toggle random mode←/→— Switch modes manually1/2/3— Set quality (Low/Med/High)
Technology Stack
- Next.js 16 with App Router and React 19.2
- Web Audio API for microphone capture and frequency analysis
- Canvas API for high-performance 2D rendering
- TypeScript for type safety across visualization components
- Tailwind CSS v4 for styling and design tokens
- Radix UI for accessible Sheet and Dialog components
- Vercel Analytics for usage tracking
🔗 Links
- Live Demo: https://audio-visualizer.griffen.codes/
Give it a try if you’re looking for browser-based audio visualizations that actually respond to your music in real-time. The keyboard shortcuts make it perfect for live performances where you need hands-free control.
