Spectrogram

The problem

A waveform, the squiggle everyone recognises, shows how loud a sound is. It doesn't show pitch: a low hum and a high whistle look much the same. A spectrogram shows which pitches are present over time. It's how speech recognition, music software and bird-call apps look at sound.

I built this for two kinds of visitor. The first has heard of the Fourier transform and wants it to feel intuitive. The key idea is a trade-off: you can't have sharp timing and sharp pitch at once. The second is a technical reviewer. Browsers ship a built-in analyser that draws a spectrogram in ten lines, and that proves nothing about the person who used it. I wanted to write the transform myself and show that it's correct.

What I built

I proved the maths before building any screen

A wrong transform still draws a convincing picture, and no amount of looking reveals the bug. So I wrote the transform and its tests first, and the interface came after. I set up four independent checks: a slow textbook version to compare against, an energy rule that must hold for every input, a round trip back to the original signal, and hand-checkable test signals. Each one catches mistakes the others miss.

The trade-off is a control you drag

The main screen draws sound from your microphone or a sample as a scrolling picture, with the waveform above it. Hovering gives the exact time, pitch and loudness. The timing-versus-pitch trade-off is a control with three named positions, from "sharper in time" to "sharper in pitch". Dragging it teaches the idea faster than a paragraph. The raw settings sit behind an "advanced" fold.

Smooth on screen because nothing is thrown away

At 60 frames a second, a memory clean-up pause looks like a broken app. I set up all the working memory once per setting and reused it, so the app allocates nothing per frame. The analysis runs in a background thread. The test that guards this measures memory growth over a full minute, as well as raw speed.

The audio never leaves the device

Any site that asks for your microphone owes you an answer about where the audio goes. Here the answer is nowhere, and the build enforces it. A check scans the finished site for anything the browser would fetch and fails the deploy if it finds one. The only exceptions are four links to my own profiles, each listed by exact address.

A proof page that admits the browser is faster

The proof page runs my transform beside the browser's built-in analyser on the same input and shows the difference at every frequency. The built-in one is faster, and the page says so. Speed was never the claim. To make the comparison fair, I matched its window shape and its loudness scale exactly.

Result

Spectrogram is live and public, in English and Indonesian. It offers four window shapes, three pitch scales and a synthesis mode where you build a signal from pure tones and watch the spectrum recover exactly what you put in. Six bundled samples are generated in code, so the site works even if you deny the microphone. On a desktop, the transform runs about 101 times faster than real time. I built it in a single session of about four hours on 6 August 2026.