Sonogram: Transforming Sound into Visual Fingerprints
A deep dive into Sonogram, a full-stack web app that turns a song's mathematical properties into an interactive, shareable 3D 'sonic fingerprint'.
Updated
Sonogram has been retired. The visualizers and the public gallery are gone, but the audio analysis underneath — loudness, key, tempo, waveforms — lives on inside 1-bit. Here’s the full story →
I built Sonogram to answer a daft little question: what would a song look like if you could actually see it? Drop in a track and it reads the audio’s real shape — loudness, key, tempo, texture — and turns those numbers into an interactive 3D “sonic fingerprint” you can spin around.
What it does
librosa — and paints a live 3D visualization with Three.js./embed/ route for external use.Tech Stack
| Layer | Technologies |
|---|---|
| Backend | FastAPI, SQLAlchemy (SQLite), Uvicorn |
| Deployment | Fly.io, Docker |
| Audio Analysis | librosa, scipy, numpy (Single-pass STFT) |
| Frontend | Vanilla JS (~9K lines), Three.js (WebGL), PWA |
| Imaging | Pillow (for PNG generation) |
Interesting Facts
Every artwork carries its own ID, hidden inside the image itself. I tuck it into the least-significant bits of the blue channel, where the eye can’t see it — so you can re-upload a PNG and get its metadata back with no server lookup at all.
Before it renders a single frame, the frontend sizes up your machine — GPU, CPU cores, RAM, screen — and sorts it into a LOW / MEDIUM / HIGH tier, then dials these to match so nothing stutters:
The seed is a SHA-256 hash of the raw audio bytes, so the same file always paints the same picture. One song, one fingerprint — that mattered to me more than it probably should have.
Users can switch between three distinct modes in fullscreen:
To guess a track’s key it uses the Krumhansl–Schmuckler algorithm — matching the song’s pitch content against the fingerprint of every major and minor key, then picking the best fit. It’s surprisingly good at it.
Includes theme definitions (Bauhaus, Neon Cyberpunk, Aerial Objects) with ControlNet scale parameters, hinting at a future generative AI triptych feature.
The Gallery and Studio run as a vanilla-JS single-page app for speed, but each individual sonogram page (/s/{id}) is server-rendered so a shared link arrives with a proper preview. Best of both.