Audio Visualizer

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