Skip to content

Interactive STFT Spectrogram Analyzer

Copy this iframe to your website:

1
<iframe src="https://dmccreary.github.io/signal-processing/sims/interactive-stft-spectrogram-analyzer/main.html" width="100%" height="612px" scrolling="no"></iframe>

Run MicroSim in Fullscreen

Edit in the p5.js Editor

Description

The short-time Fourier transform (STFT) cuts a signal into frames, multiplies each frame by a window \(w[n]\) and takes the DFT of every frame:

\[X[m,k] = \sum_{n=0}^{N-1} x[n+mH]\,w[n]\,e^{-j2\pi kn/N}\]

Here \(m\) is the frame index, \(k\) the frequency bin, \(N\) the window length and \(H\) the hop size. This MicroSim computes the STFT of one test signal twice, with window length A (teal) and window length B (purple), and stacks the two spectrograms on one time axis so they can be compared directly. Four checkboxes build the signal from two tones, two clicks, a chirp and noise. Two sliders set the tone spacing and the click spacing, and two more set the window lengths. Menus choose the window type and the hop size. Click a spectrogram to place a time and frequency cursor; the spectrum of the frame at the cursor is drawn beside each spectrogram. The display shows why a short window locates events in time, why a long window separates components in frequency, and why no window does both.

This simulation is used in Chapter 8: Advanced Transforms.

The test signal

The sampling rate is \(f_s = 8000\) Hz. The signal lasts 1 s and the display shows 250 to 750 ms and 0 to 2000 Hz.

Component Description What it tests
Two tones Steady sinusoids of amplitude 1 at 500 Hz and at 500 Hz plus the tone spacing Frequency resolution
Two clicks Single-sample impulses at 500 ms and at 500 ms plus the click spacing Time resolution
Chirp A tone that rises steadily at 800 Hz per second, from 1300 Hz at the left edge to 1700 Hz at the right edge Both at once
Noise White Gaussian noise with standard deviation 0.2 Robustness of what you see

Reading the display

  • The waveform at the top shows a teal bar and a purple bar: the samples that window A and window B use at the time cursor.
  • Each spectrogram caption gives the window's time span \(\Delta t = N/f_s\) and bin spacing \(\Delta f = f_s/N\), followed by the two spacings in the window's own units: the tone spacing in bins and the click spacing in window lengths.
  • Beside each spectrogram is the spectrum of the frame at the cursor, drawn sideways on the same frequency axis.
  • Colour runs from \(-60\) dB (dark) to 0 dB (bright), where 0 dB is a steady, bin-centred sinusoid of amplitude 1. Levels above 0 dB, such as two tones that merge and add, are drawn in the brightest colour.
  • The red line is the time cursor and the dashed line is the frequency cursor. The box at the upper right reports the cursor position and the distance from the cursor to the mouse pointer.

How to use

  1. Click in either spectrogram to place the cursor at a time and frequency. Click or drag in the waveform to move the time cursor only.
  2. Point at another feature without clicking. The box at the upper right reports the distance from the cursor to the pointer in milliseconds and hertz.
  3. Move the Window A and Window B sliders (32 to 2048 samples) and watch the two pictures and their captions.
  4. Change the Tone spacing (10 to 400 Hz) and the Click spacing (2 to 100 ms) to make the test easier or harder. Each slider is greyed out while its component is switched off.
  5. Tick Chirp or Noise to add components, and try the other Window types and Hop sizes.

What to expect

Two tones show as two separate lines only if they are about two or more bins apart. Two clicks show as two separate vertical lines only if they are about one window length or more apart. Since \(\Delta t \times \Delta f = 1\), making one of these easier makes the other harder. With the default spacings (100 Hz and 20 ms) window A separates the clicks and merges the tones, and window B does the opposite.

When both clicks fall inside one long window, the spectrum of that frame shows evenly spaced ripples. Two impulses \(\tau\) seconds apart have a spectrum that rises and falls every \(1/\tau\) hertz, so the spacing of the ripples still carries the time information that the picture has lost.

Lesson Plan

Learning Objectives

By the end of this activity, students will be able to:

  1. Compare spectrograms of one signal made with a short and a long window.
  2. Predict from the window length whether two tones or two clicks will be separated.
  3. Measure time and frequency separations on a spectrogram with cursors.
  4. Justify a choice of window length, window type and hop size for a given signal.
  5. Explain why the time span and the bin spacing of a window cannot both be made small.

Target Audience

College undergraduates in a digital signal processing, or signals and systems, course. Plan 25 to 30 minutes.

Prerequisites

  • The DFT, bin spacing and window functions
  • The idea of a spectrogram
  • Sampling rate and sample period

Activities

Activity 1: Two windows, two failures (5 min). Keep the default settings: tones 100 Hz apart, clicks 20 ms apart, \(N = 64\) in A, \(N = 1024\) in B, Hann window, hop \(N/4\).

  • Spectrogram A shows two thin vertical lines at 500 ms and 520 ms but one wide horizontal band around 500 to 600 Hz. Its caption reads "tones 0.8 bins apart, clicks 2.5 windows apart".
  • Spectrogram B shows two thin horizontal lines at 500 Hz and 600 Hz but one vertical band where the clicks are. Its caption reads "tones 12.8 bins apart, clicks 0.16 windows apart".
  • Click on a line in B and point at the other one. The box reports about 100 Hz. Click on a click line in A and point at the other: about 20 ms.

Activity 2: Find the window length that works (10 min). Step window A through \(N = 32, 64, 128, 256, 512\) with the defaults. Use the captions to fill in the first four columns, and the picture to fill in the last two.

\(N\) \(\Delta t\) \(\Delta f\) tones apart clicks apart tones separate? clicks separate?
32 4 ms 250 Hz 0.4 bins 5 windows no yes
64 8 ms 125 Hz 0.8 bins 2.5 windows no yes
128 16 ms 62.5 Hz 1.6 bins 1.25 windows no yes
256 32 ms 31.3 Hz 3.2 bins 0.63 windows yes no, only a shallow dip
512 64 ms 15.6 Hz 6.4 bins 0.31 windows yes no

No length separates both pairs cleanly. Now set the tone spacing to 200 Hz and window A to \(N = 128\). The tones are 3.2 bins apart and the clicks 1.25 windows apart, so both pairs are separated. Explain this with \(\Delta t \times \Delta f = 1\).

Activity 3: What the long window still knows (5 min). Untick Two tones, set the click spacing to 4 ms and window B to \(N = 1024\). Put the cursor on the clicks in B.

  • The two clicks are only 0.03 windows apart and appear as one vertical band, but across the band run horizontal stripes. The frame spectrum beside B has eight ripples between 0 and 2000 Hz.
  • Click on one stripe and point at the next: the box reports about 250 Hz, which is \(1/(4\ \text{ms})\).
  • Set the click spacing to 10 ms: the ripples are 100 Hz apart, and there are 20 of them.

Activity 4: A moving tone (5 min). Untick Two tones and Two clicks and tick Chirp. Set window A to \(N = 256\) and window B to \(N = 512\), then try \(N = 1024\) and \(N = 2048\) in B.

  • The ridge is thinnest at \(N = 512\). In the frame spectrum at the cursor, the ridge is about 64 Hz wide at \(N = 256\), 38 Hz wide at \(N = 512\) and 51 Hz wide at \(N = 1024\), measured where it has fallen to half its peak height (\(-6\) dB).
  • At \(N = 2048\) the ridge is smeared to about 102 Hz and its peak has fallen to about \(-11\) dB.
  • The chirp rises 800 Hz every second, so it moves 51 Hz during the 64 ms window of \(N = 512\). Why does a longer window smear it even though its bins are finer, and why is a shorter window coarse?

Activity 5: Window type and hop size (5 min).

  • Untick Two clicks and set window A to \(N = 256\). With Hann, the frame spectrum is above \(-60\) dB (the left edge of its plot) in only 11 of its 65 bins, a narrow skirt around the tones. With Rectangular it is above \(-60\) dB in all 65 and the curve runs across the whole plot. What happens to the area around the tones, and why?
  • Restore Hann and the clicks, set window A to \(N = 64\) and change the hop from \(N/4\) to \(N\) (no overlap). The click at 520 ms disappears from A. It falls on the first sample of a frame, where the Hann window is zero. Choose \(N/2\) and it returns.
  • Compare \(N/4\) with \(N/8\). The picture is smoother but the lines are no thinner. Does a smaller hop improve the resolution?

Assessment

  1. With the default settings, which window separates the tones and which separates the clicks? Answer: window B (\(N = 1024\)) separates the tones, which are 12.8 bins apart, and merges the clicks, which are 0.16 windows apart. Window A (\(N = 64\)) separates the clicks (2.5 windows apart) and merges the tones (0.8 bins apart).
  2. What is the product of a window's time span and its bin spacing, and what does it imply? Answer: \(\Delta t \times \Delta f = (N/f_s)(f_s/N) = 1\) for every \(N\). Doubling the window length halves the bin spacing but doubles the time span, so improving one resolution worsens the other.
  3. What is the shortest window in the sliders that separates two tones 100 Hz apart with the Hann window, and why? Answer: \(N = 256\). The bin spacing is 31.25 Hz, so the tones are 3.2 bins apart and the frame spectrum shows two peaks with a valley about 9 dB deep. At \(N = 128\) they are 1.6 bins apart and merge into one peak.
  4. The tones are 200 Hz apart and the clicks 20 ms apart. Which single window length separates both pairs? Answer: \(N = 128\). The tones are 3.2 bins apart and the clicks 1.25 windows apart. \(N = 64\) puts the tones 1.6 bins apart, and \(N = 256\) puts the clicks 0.63 windows apart.
  5. Two clicks fall inside one long window and the frame spectrum has ripples 125 Hz apart. How far apart are the clicks? Answer: 8 ms, because the ripple spacing is \(1/\tau\) and \(1/(125\ \text{Hz}) = 8\) ms.

Common Misconceptions

"There is one best window length for every signal." The best window depends on what must be separated. Compare window A and window B in Activity 1: each one fails at the task the other one does well.

"A smaller hop size improves time resolution." The hop only sets how many frames are drawn. Change the hop from \(N/2\) to \(N/8\) and the click and tone lines keep the same width; only the window length and type change the width.

"What a spectrogram does not show has been destroyed." Two clicks inside one long window merge in the picture, but their spacing is still present in the frame spectrum as ripples \(1/\tau\) hertz apart (Activity 3).

References

  1. Short-time Fourier transform - Wikipedia - definition of the STFT, window and hop size
  2. Spectrogram - Wikipedia - the magnitude of the STFT displayed as an image
  3. Window function - Wikipedia - Hann, Hamming, Blackman and rectangular windows and their main lobes
  4. Chirp - Wikipedia - signals whose frequency changes with time
  5. 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
  6. Allen, J. B., & Rabiner, L. R. (1977). A unified approach to short-time Fourier analysis and synthesis. Proceedings of the IEEE, 65(11), 1558-1564.
  7. Cohen, L. (1995). Time-Frequency Analysis. Prentice Hall.
  8. Time-Frequency Analysis Explorer - this textbook - a single spectrogram with adjustable overlap, colour map and scale
  9. Chapter 8: Advanced Transforms - this textbook - the chapter that embeds this MicroSim