Skip to content

Interactive Spectrogram Parameter Explorer

Copy this iframe to your website:

1
<iframe src="https://dmccreary.github.io/signal-processing/sims/interactive-spectrogram-parameter-explorer/main.html" width="100%" height="742px" scrolling="no" allow="microphone"></iframe>

Run MicroSim in Fullscreen

Description

This MicroSim computes two spectrograms of the same signal, panel A above panel B, each with its own short-time Fourier transform (STFT) settings:

\[X[m,k] = \sum_{n=0}^{N-1} x[n + mH]\,w[n]\,e^{-j2\pi kn/(PN)}, \qquad H = N(1 - \text{overlap})\]

Each panel has its own window length \(N\) (64 to 2048 samples), overlap (0 to 93.75%, so the hop \(H\) runs from \(N\) down to \(N/16\)), window (Hann, Hamming, Blackman or rectangular), zero-padding factor \(P\) (pad ×1 to ×8), dB floor (−120 to −20 dB) and color map (viridis, inferno, gray or jet). The line above each spectrogram reports the time span \(N/f_s\), the frequency resolution \(f_s/N\) (and the finer FFT bin spacing \(f_s/(PN)\) when zero padding is on), the frames per second \(f_s/H\) and the number of frames.

The Signal list offers a chirp, two close tones, a strong tone with a weak neighbor, tone bursts, a vibrato whistle (all 2 s long at \(f_s = 8000\) Hz) and the microphone. Start mic shows the last 2 s of live sound, filtered and resampled to about 8 kHz. The microphone is analyzed in your browser only and is never played back.

Guided challenges load a contrasting pair of settings and ask for a prediction; Reveal shows the answer. Pointing at a spectrogram moves a linked cursor through both panels. The line below them gives the level at that time and frequency in A and in B. The slice plot compares the two frame spectra under the cursor over a 1000 Hz span, with dots on the bins spaced \(f_s/N\) apart. Zoom magnifies the frequency axis up to ×8; click a spectrogram to center the zoom there. Levels are in dB relative to a sinusoid of amplitude 1.

This simulation is used in Chapter 14: Time-Frequency Analysis and Advanced Topics. The related Time-Frequency Analysis Explorer and Interactive STFT Spectrogram Analyzer focus on window length alone.

Lesson Plan

Learning Objectives

After using this MicroSim, students will be able to:

  1. Calculate the time span \(N/f_s\), frequency resolution \(f_s/N\), hop size, frames per second and number of frames of an STFT from its window length, overlap and sampling rate.
  2. Analyze why neither a very short nor a very long window draws a chirp as a thin line, using the sweep during one window.
  3. Distinguish true frequency resolution (\(f_s/N\)) from the FFT bin spacing produced by zero padding (\(f_s/(PN)\)).
  4. Explain how overlap and window shape affect what a spectrogram shows (missed bursts, spectral leakage) without changing \(N/f_s\) or \(f_s/N\).
  5. Evaluate a set of spectrogram parameters (window, length, overlap, dB floor, color map) for a given signal and justify the choice.

Target Audience

College undergraduates in a digital signal processing course (junior or senior level). Plan 30-40 minutes for the four activities.

Prerequisites

  • The DFT and FFT, and bin spacing \(f_s/N\)
  • Window functions and spectral leakage
  • The short-time Fourier transform and the spectrogram (Chapter 8)
  • Decibels

Activities

Activity 1: Window length on a chirp (8 min). Choose challenge 1 (A: \(N = 256\), B: \(N = 2048\)), predict, then press Reveal. At \(t = 1\) s the slice shows A's peak about 60 Hz wide (6 dB down) and B's about 230 Hz wide: the chirp rises 1800 Hz/s, so it sweeps \(1800 \times 0.256 = 461\) Hz during one of B's windows. Step B's \(N\) down and read the peak of B's slice: −20.7 dB at 2048, −14.7 dB at 1024 and −8.8 dB at 512, against −6.2 dB for A. Then set A to \(N = 64\) with pad ×8: its peak widens to about 220 Hz. The best window for this chirp lies between these extremes.

Activity 2: Resolution versus zero padding (8 min). Choose challenge 2 (two tones 60 Hz apart). At \(t = 1\) s, B (\(N = 512\)) has two peaks, at 1000 Hz and 1062.5 Hz, with a dip to −35.2 dB between them, while A (\(N = 128\)) has one. Set A to \(N = 256\): still one peak, at 1031 Hz (the tones are only 1.9 bins apart). Set A to \(N = 512\): two peaks. Now choose challenge 3. A's caption reads "fs/N = 62.5 Hz (FFT bins 7.813 Hz)": its slice is smooth but remains a single peak about 130 Hz wide, while B's real 1024-sample window separates the tones with a dip of about 56 dB.

Activity 3: Overlap (7 min). Choose challenge 4 (bursts, \(N = 256\) in both panels). Both captions show \(N/f_s = 32\) ms and \(f_s/N = 31.25\) Hz, but A has 31.3 frames/s (62 frames) and B 125 frames/s (247 frames). Point at the brightest cell of each burst: in A the bursts peak between −10.1 and −36.0 dB (the cursor starts on the burst at 0.25 s, which falls on a frame boundary), in B between −10.1 and −11.3 dB. Set A's overlap to 50%: the range shrinks to −10.1 to −15.3 dB.

Activity 4: Window shape and dB floor (8 min). Choose challenge 5 (cursor at 1450 Hz, the weak tone). Switch A's window and read the A level: rectangular −36.5 dB, Hamming −49.5 dB, Blackman −56.9 dB, and Hann (panel B) −57.4 dB. Hamming's leakage at 1450 Hz (−54 dB, measured without the weak tone) is about as strong as the weak tone, so its line barely stands out; Hann and Blackman keep their leakage below −80 dB there and show it clearly. Then choose challenge 6: both panels read −57.4 dB at the cursor, but A's −40 dB floor paints the weak tone the floor color. Finish with challenge 9 and your own voice.

Assessment

  1. A 2 s signal at \(f_s = 8000\) Hz is analyzed with \(N = 512\) and 75% overlap. Give \(N/f_s\), \(f_s/N\), the hop, the frames per second and the number of frames. Answer: 64 ms, 15.625 Hz, \(H = 128\) samples, 62.5 frames/s, and \(\lfloor (16000 - 512)/128 \rfloor + 1 = 122\) frames (as panel B shows in challenge 2).
  2. Panel A uses \(N = 128\) with pad ×8. What are its FFT bin spacing and its frequency resolution at \(f_s = 8000\) Hz, and can it separate two tones 60 Hz apart? Answer: bins every \(8000/1024 = 7.8125\) Hz, but the resolution is still \(8000/128 = 62.5\) Hz, so no: zero padding interpolates the spectrum of the same 16 ms window.
  3. A chirp rises at 1800 Hz/s. How far does its frequency move during a 256 ms window, and what does this do to the spectrogram? Answer: \(1800 \times 0.256 = 461\) Hz; the energy of one frame spreads over that range, so the line widens (about 230 Hz at 6 dB down) and its peak drops (−20.7 dB versus −6.2 dB with \(N = 256\)).
  4. With a Hann window and 0% overlap, why can a short burst almost disappear, and what is the largest distance between a burst and the nearest frame center at 75% overlap with \(N = 256\)? Answer: the Hann window is close to zero at its ends, so a burst between two frames is multiplied by small window values in both; at 75% overlap the hop is 64 samples (8 ms), so every burst lies within 4 ms of a frame center.
  5. You must show a tone 50 dB below a strong tone 400 Hz away, with \(N = 256\). Rectangular or Hann, and why? Answer: Hann; the rectangular window's sidelobes from the strong tone are still about −37 dB at the weak tone's frequency, above the weak tone's −57 dB, while Hann's leakage there is below −80 dB.

Common Misconceptions

"Zero padding improves frequency resolution." Challenge 3 gives both panels a 1024-point FFT. A's zero-padded 128-sample window still shows one smooth peak about 130 Hz wide for two tones 60 Hz apart. In some frames a notch splits it into two bumps near 970 and 1090 Hz, 125 Hz apart, at the wrong frequencies. Only B's longer window separates the tones.

"More overlap gives a sharper spectrogram." In challenge 4 the captions show the same \(N/f_s\) and \(f_s/N\) in both panels whatever the overlap. Overlap only samples time more densely, which stops short bursts from slipping between frames.

References

  1. Short-time Fourier transform - Wikipedia - definition of the STFT, hop size and the time-frequency resolution trade-off
  2. Spectrogram - Wikipedia - how spectrograms are computed and displayed, including wideband and narrowband speech spectrograms
  3. Window function - Wikipedia - Hann, Hamming, Blackman and rectangular windows, main-lobe width and sidelobe levels
  4. Spectral leakage - Wikipedia - why a rectangular window spreads a strong tone across the spectrum
  5. Chirp - Wikipedia - linear frequency sweeps like the test chirp used here
  6. The Scientist and Engineer's Guide to Digital Signal Processing - Steven W. Smith - free online textbook with chapters on the DFT, windows and spectral analysis
  7. MediaDevices: getUserMedia() method - MDN - how a web page asks for microphone access and why it needs a secure context