Sound → pixels. Nightclub vibes.
The Inspiration
OpenAI Dev Day in London, 2024. Their audio visualizations were mesmerizing. I wanted to build something similar.
What I Built
A real time audio visualizer where:
- Drag and drop any audio file
- Radial ripple effect from center
- Colors respond to frequency
- Smooth, hypnotic animations
Stack: Next.js, Web Audio API, Canvas
Key Learnings
1. Web Audio API is powerful
FFT analysis, frequency data, volume levels: all available in the browser. No external libraries needed for the audio processing.
2. Canvas performance matters
Naive drawing = choppy visualization. RequestAnimationFrame + careful canvas management = smooth 60fps.
3. Color mapping is an art
Mapping frequencies to colors that look good together is surprisingly hard. Ended up using HSL color space for smooth gradients.
4. Audio is personal
Everyone tests with their favorite songs. Build something that looks good across genres.