Real-Time Spectrogram
Scrolling frequency-vs-time waterfall from your microphone with five colormaps (Matrix green, Viridis, Magma, Inferno, Grayscale), log/linear frequency axis, adjustable dB range, configurable FFT size, and PNG screenshot export.
Cursor
| Frequency at cursor | — |
| Time at cursor | — |
| Musical note | — |
| Active colormap | Matrix Green |
Controls
About Spectrograms & Colormaps
A spectrogram shows three dimensions of audio at once: time on one axis, frequency on another, and magnitude as colour intensity. It is the single most informative way to look at a complex sound — speech formants, music harmonics, machine noise, bird songs, the click of a key on a keyboard all have distinctive spectrogram "fingerprints". In this tool, newest data scrolls in at the top and ages downward.
FFT size, bin width and time resolution
The frequency-axis resolution is Δf = sample_rate / N; the time-axis update rate is the inverse — bigger N means finer frequency lines but each row represents a longer time slice (~ N / sample_rate seconds). Two extremes:
- Small FFT (1024 at 48 kHz: 46.9 Hz/bin, ~21 ms/row): sharp time response, blurry frequencies. Good for percussion, transient detection, drum analysis.
- Large FFT (16384 at 48 kHz: 2.9 Hz/bin, ~341 ms/row): sharp frequency lines, smeared time. Good for sustained tones, instrument tuning, room modes.
For voice and most music, 4096 is the comfortable middle. This is the same time/frequency tradeoff that signal processors call the uncertainty principle — you cannot resolve both arbitrarily.
Choosing a colormap
The five built-in colormaps each have a job:
- Matrix Green — the site default. Black → dark green → bright green → near-white. Looks cinematic; works well for high-contrast displays.
- Viridis — matplotlib's default since 2017. Perceptually uniform across its range (equal brightness steps look equal-sized), colour-blind safe, accurate when printed in grayscale. The right default for scientific work.
- Magma — dark, perceptually uniform, with deep purples in low-energy regions. Good for displaying spectrograms on light backgrounds.
- Inferno — bright, perceptually uniform, like Magma but warmer. Good for highlighting strong peaks.
- Grayscale — simplest possible. Useful for publication-quality figures or when you want users to bring their own colour mapping.
Floor and ceiling dB
The floor (minimum) is the dB level that maps to the colormap's "minimum" colour (black/dark purple); the ceiling (maximum) maps to the "brightest" colour. Lower the floor to see more detail in quiet passages; raise it to suppress noise. Tighten the range (e.g., −60 to −20) for high-contrast displays of strong-signal regions; widen it (−120 to 0) for everything-visible monitoring. The floor/ceiling are the analyser's minDecibels / maxDecibels properties — they control the linear-to-dB mapping internally as well.
Why logarithmic frequency?
Music and speech are pitched roughly logarithmically — each octave is a doubling of frequency. A linear-axis spectrogram puts the entire bass range in 1% of the screen width and gives the unused high frequencies the rest. A logarithmic axis gives each octave equal visual space, which is what musicians, voice analysts, and acousticians want almost always. Use linear only when you specifically need uniform spacing of high-frequency tones.