Generate a full spectrogram heatmap image from audio files showing frequency over time.
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.
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.
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.
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.
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.
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.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.