Spectrogram Generator Online — Visualize Frequency Over Time
Capture live microphone audio or generate demo signals, compute the STFT in real time, and view a scrolling color-mapped spectrogram — entirely in your browser. No uploads, no sign-up.
Spectrogram
Current Waveform
Amplitude vs. time (current analysis frame)
How This Spectrogram Generator Works
This tool computes a Short-Time Fourier Transform (STFT) to break sound into short overlapping frames, then plots the frequency content of each frame as a column of colored pixels. The process runs entirely inside your browser:
- Audio capture or generation — In microphone mode, the Web Audio API streams audio from your device's mic. In demo mode, signals are synthesised mathematically (chirps, tones, noise).
- Windowing — Each frame is multiplied by a Hann window to reduce spectral leakage at the frame boundaries.
- FFT — A radix-2 Cooley–Tukey FFT converts each windowed frame from time domain to frequency domain.
- Magnitude → color — The magnitude spectrum is converted to dB, mapped through the chosen colormap (viridis, magma, or plasma), and written pixel-by-pixel onto the canvas using
ImageData. - Scrolling display — In live mode, the spectrogram scrolls continuously to the left so the newest data is always at the right edge.
Understanding the Controls
FFT size sets the number of samples per frame. Larger values give finer frequency resolution but coarser time resolution (the Heisenberg–Gabor uncertainty trade-off). Overlap controls how much adjacent frames share samples — higher overlap yields a smoother time axis. The gain slider amplifies quiet signals before color mapping.
Colormaps
Viridis is a perceptually uniform colormap ranging from dark purple through blue, green, and yellow. Magma goes from black through magenta to pale yellow. Plasma goes from dark blue through purple and orange to yellow. All three are designed to be readable by people with color-vision deficiencies.
Spectrogram FAQ
What is a spectrogram?
A spectrogram is a visual representation of how the frequency content of a signal changes over time. The horizontal axis represents time, the vertical axis represents frequency, and the color (or intensity) at each point shows the magnitude of that frequency at that moment. Spectrograms are widely used in audio analysis, speech recognition, music production, and vibration analysis.
How do I read a spectrogram?
Time flows left to right. Low frequencies are at the bottom, high frequencies at the top. Bright or warm colors indicate strong energy at that frequency and time. A pure steady tone appears as a horizontal line. A chirp (frequency sweep) appears as a diagonal line. Harmonics appear as evenly spaced horizontal lines above the fundamental.
What is the difference between the STFT and the FFT?
The FFT computes the frequency content of an entire signal at once — you get one frequency snapshot. The Short-Time Fourier Transform (STFT) divides the signal into short overlapping frames, applies a window function to each frame, and computes the FFT of each frame independently. This produces a sequence of spectra over time, which is exactly what a spectrogram displays.
How does FFT size (window size) affect the spectrogram?
Larger FFT sizes give better frequency resolution (finer frequency bins) but worse time resolution — fast changes in the signal get smeared. Smaller FFT sizes give better time resolution but coarser frequency resolution. This is a fundamental trade-off known as the Heisenberg–Gabor uncertainty principle in signal processing. A common practical choice is 1024 or 2048 samples.
What does the overlap parameter do?
Overlap controls how far apart consecutive analysis frames are. Higher overlap (e.g., 75%) means frames are closer together in time, producing a smoother-looking spectrogram with more time steps. Lower overlap (e.g., 25%) is faster to compute but can look choppy. 50% overlap is the most common default for general-purpose analysis.
Cite This Tool
APA
Fourier Tools. (2026). Spectrogram Generator Online. Retrieved February 17, 2026, from https://fourier.tools/tools/spectrogram
BibTeX
@misc{fouriertools2026spectrogram,
title = {Spectrogram Generator Online},
author = {Fourier Tools},
year = {2026},
url = {https://fourier.tools/tools/spectrogram},
note = {Accessed: 2026-02-17}
}