Frequency Heatmap Generator

1. Drop a file (or click the zone to browse). WAV, MP3, OGG, FLAC and M4A all work where your browser can decode them. The file is decoded entirely in your browser.
2. The heatmap renders automatically: each vertical slice is one FFT, plotted left→right over time, with colour encoding magnitude in dB.
3. Pick a colour scale and a frequency axis (log is best for music and voice; linear spreads high frequencies evenly).
4. Drag the floor / ceiling sliders to re-map the colour range — lower the floor to see faint detail, raise it to suppress noise.
5. Change FFT size to trade frequency resolution against time resolution, then Export PNG or SVG.

A spectral heatmap (a spectrogram rendered as a static image) shows three dimensions at once: time across the bottom, frequency up the side, and magnitude as colour. Horizontal stripes are sustained tones or harmonics; vertical streaks are transients (clicks, drum hits, consonants); diagonal lines are pitch glides or sweeps.

The colour represents relative magnitude in dBFS — decibels relative to digital full scale, not calibrated sound-pressure level. The brightest colour is whatever your ceiling slider is set to; the darkest is the floor. Two files mastered at different levels will look different even if they contain the same content, because the absolute reference depends on the file’s own peak level, not on a physical SPL.

The vertical extent is bounded by Nyquist — half the file’s sample rate. A 44.1 kHz file can only show up to ~22 kHz; nothing above that was ever recorded. The vertical resolution is one FFT bin, Δf = sample rate ÷ FFT size. The horizontal resolution is the number of time columns; for long files the frames are sampled evenly down to a fixed maximum (1,400) — one frame kept, the rest skipped — so a very brief event that falls on a skipped frame can be thinned out or missed entirely.

When you drop a file, the browser’s AudioContext.decodeAudioData turns it into raw PCM samples — locally, with no upload. The tool then runs a Short-Time Fourier Transform (STFT):

• The chosen channel is split into overlapping frames of N samples (the FFT size), stepped by 50% (the hop).
• Each frame is multiplied by a Hann window to reduce spectral leakage, then transformed with a radix-2 FFT.
• Each frame’s magnitude spectrum becomes one column of the heatmap. Magnitudes are window-normalised and converted to dBFS (20 · log₁₀).
• If the clip would produce more than 1,400 frames, frames are sampled evenly down to 1,400 columns so the canvas, memory and exports stay bounded.

Rendering maps each pixel row to a frequency bin through the selected axis (log or linear) and each pixel column to a time column, then looks the dB value up in a 256-entry colour-map lookup table whose endpoints are your floor and ceiling. PNG export re-renders the heatmap into a clean canvas and downloads it via canvas.toBlob. SVG export writes a standalone SVG document: the heatmap raster is embedded as a bounded base64 image and the axis ticks/labels are emitted as vectors, downloaded via a Blob. This is a 2D-canvas renderer — no WebGL is used or claimed.

Honesty & limits. Results are bounded by the file’s sample rate (Nyquist) and the FFT resolution you choose. Colours are relative, uncalibrated dBFS — useful for comparing content within one clip, not for absolute SPL. Long files are downsampled for display. The model is the standard windowed STFT; like all spectrograms it trades time resolution against frequency resolution and cannot beat that uncertainty limit. Nothing leaves your device.