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.
Agent Quick Start
# Audio Visualizer
Real-time audio visualization. Drop a file, watch it dance.
## Features
- Drag and drop audio
- Radial ripple visualization
- Frequency-based colors
- Smooth animations
## Stack
Next.js, Web Audio API, Canvas
## How It Works
1. Audio file → Web Audio context
2. FFT analysis → frequency data
3. Map frequencies → visual properties
4. Render with requestAnimationFrame
## Links
- Repo: https://github.com/sergiopesch/my-audio-visualizer