Home / Creative & Motion / Phosphor, Audio-Reactive 3D Visualizer
Phosphor, Audio-Reactive 3D Visualizer
A maker of audio software needs a visualizer for their site that reacts to music the way a mixing engineer expects, and works with nothing to install or license.
The brief and the build
Brief: Build an in-browser audio visualizer with several live 3D scenes, file, demo and microphone input, bloom, a UI that fades out, recording to video, and an autoplay-safe start.
Most browser visualizers map raw FFT magnitude straight to size, so they twitch on loud masters and sit dead on quiet ones. Phosphor conditions the signal first: three bands each normalised against their own slow peak follower, meter-style attack and release smoothing, and beat detection from spectral flux with a refractory window.
Three scenes share one material language: a particle sphere, a spectrum terrain and a spiral tunnel. The built-in 62-second track is synthesised in the browser, so there is nothing to license and it works offline. Press Start, then drop in your own file, use the microphone, or hit Record to save a WebM with the audio.
Results
- Built: three shader-driven scenes, band separation and beat detection, bloom, file, demo and mic input, and canvas plus audio recording to WebM.
- Checked: headless Chromium at 1440 and 390 px through all three scenes with no console errors; beat detection locks to the demo track’s 124 BPM; a recording produced a WebM with video and audio.
- Not yet tested: Safari, Firefox, real GPU frame rates and the microphone.
Stack
Highlights
- Custom shaders
- FFT band separation
- Beat detection
- Bloom
- WebM recording
- Mic input
Need something like this?
Tell me what you're building and I'll tell you how I'd approach it.