FFT Spectrogram Explorer¶
Specification¶
The full specification below is extracted from Chapter 18: Audio Signal Processing, Sound Classification, and Speech I/O.
Type: interactive-diagram
**sim-id:** fft-spectrogram-explorer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/signal-processing/tree/main/docs/sims/fft-sound-file<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) how a waveform, a frequency spectrum, and a spectrogram represent the same sound in three different ways, and identify how sound type changes each representation.
Canvas: 700x520px, responsive — stack the three panels vertically on screens narrower than 500px and recompute panel heights on `windowResized()`.
Layout: three stacked panels sharing the same time axis. Top panel: the raw waveform (amplitude vs. time) of the currently selected clip. Middle panel: a live bar chart of the frequency spectrum for the current playback position, one bar per frequency bin, using p5.sound's `FFT.analyze()`. Bottom panel: a scrolling spectrogram built by plotting each new frequency-spectrum snapshot as a new vertical color column, brightest colors indicating the most energy at that frequency.
Controls: a `createSelect()` dropdown labeled "Sound Clip" with four short preloaded audio options — "Pure Tone," "Dog Bark," "Speech Sample," "White Noise" — each under 3 seconds; a `createButton()` labeled "Play / Pause."
Interaction: hovering anywhere over the spectrogram panel draws a vertical highlight line at that time position and simultaneously redraws the frequency-spectrum bar chart above it to match that exact moment, letting a student directly compare a spectrogram column to its source spectrum. Clicking any bar in the frequency-spectrum panel shows a tooltip with that bar's exact frequency range in Hz and its magnitude value.
Implementation: p5.js with the p5.sound library's `FFT` object for real-time analysis during playback, and a pre-computed spectrogram buffer (array of frequency-spectrum snapshots) built once when a clip is selected so hovering can look up any past moment instantly rather than only the live playback position.