b2KIT

Audio Spectrogram Image

Generate a full spectrogram heatmap image from audio files showing frequency over time.

Tested tool guide Tested browser tools Checked August 16, 2026

What Audio Spectrogram Image does, with a checked example

This tool reads an audio file, slices it into many short overlapping time windows, and runs each window through a Fourier transform to get its frequency content. Those columns are stacked left to right to build one image: time along the x-axis, frequency along the y-axis, and color showing how much energy is present at each frequency at each instant. The thing people get wrong most often is treating brightness as an absolute loudness value - the color scale is normalized to the loudest moment in that particular file, so two spectrogram images from different recordings are not directly comparable by eye.

Worked example

A concrete input and expected output from the current implementation.

Input

a 3-second WAV file containing a pure 440 Hz sine tone (concert-pitch A) at constant amplitude

Expected output

a spectrogram image with one bright horizontal band running the full width of the image at the row corresponding to 440 Hz, with the rest of the image dark

a steady pure tone has all its energy at a single frequency for the whole duration, so the STFT reports a peak at 440 Hz in every time window, producing a flat unbroken line rather than a sweep or a smear.

How the result is produced

1

Short-time Fourier transform

The audio is split into overlapping windows (a fixed sample count per window, with adjacent windows overlapping so no transient is missed at a window boundary). Each window is multiplied by a tapering function to reduce edge artifacts, then transformed with an FFT to yield a magnitude value per frequency bin for that instant in time.

2

Amplitude-to-color mapping

Each window's FFT output becomes one vertical column of pixels: low frequencies near the bottom, high frequencies near the top, magnitude converted to a decibel scale so quiet and loud content are both visible. Decibel values are then mapped onto a color gradient, typically dark for silence and progressively brighter or hotter colors for louder frequency content.

Good uses

  • inspecting a bird call, animal sound, or field recording to see how its frequency content changes over the course of the call
  • checking whether a specific tone is present in a recording, such as a DTMF touch-tone, a test signal, or a hum at a fixed frequency
  • visually auditing an audio file for clipping, dropouts, background noise, or content above the audible range before further editing

Limits and checks

  • the color scale is normalized per file to its own loudest moment, so brightness is not a reliable way to compare loudness or presence of a frequency across two different spectrogram images
  • there is a fixed tradeoff between time and frequency resolution set by the window size: a window short enough to show fast transients sharply will blur close frequencies together, and vice versa
  • stereo files are almost certainly summed or reduced to a single channel for analysis, so panning differences or content that exists in only one channel will not show up distinctly

Common questions

Can I use the image to measure the exact frequency or decibel level of a sound?

Only approximately. The y-axis position gives you the frequency bin the energy falls into, and bin width depends on the window size used, so you're reading a band, not an exact value. Color-to-decibel is also relative to that file's own scale, not an absolute calibrated loudness measurement.

Why does my recording show nothing above a certain height in the image?

The top of the frequency axis is capped at the Nyquist frequency, half the file's sample rate. A file sampled at 44.1 kHz tops out at 22.05 kHz; if your recording was made at a lower sample rate, content above that ceiling was never captured and can't appear.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.

Related Tools