Audio Sampling Rate and Aliasing Explorer¶
Specification¶
The full specification below is extracted from Chapter 18: Audio Signal Processing, Sound Classification, and Speech I/O.
Type: microsim
**sim-id:** audio-sampling-aliasing-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *apply* (Bloom L3: Apply) the relationship between tone frequency and sampling rate to predict when a digitized signal will show aliasing distortion.
Canvas: 700x450px default, responsive — recompute plot width from `windowWidth` in `windowResized()`, keeping a minimum readable height of 350px on narrow screens.
Layout: two stacked waveform plots. The top plot draws a smooth continuous sine wave representing the analog audio signal at the current tone frequency. The bottom plot draws the same time window but shows only the discrete sample points (small filled circles) taken at the current sampling rate, connected with straight line segments to show what a reconstructed digital signal actually looks like. A text readout above the plots shows the current tone frequency, sampling rate, and the computed Nyquist minimum (\( 2 \times \) tone frequency).
Controls: a `createSlider()` labeled "Tone Frequency (Hz)" (range 100-2000, default 440); a `createSlider()` labeled "Sampling Rate (Hz)" (range 200-4000, default 1000); a `createButton()` labeled "Play Tone" that toggles playback of the current tone using p5.sound's `p5.Oscillator`, muting automatically after 2 seconds.
Interaction: whenever the sampling rate slider drops below twice the tone frequency, the reconstructed waveform in the bottom plot visibly warps into a different, lower apparent frequency (aliasing), and a warning banner appears reading "Aliasing! Sampling rate is below the Nyquist minimum of [2x tone frequency] Hz for this tone." The banner disappears automatically once the sampling rate slider is moved back above that minimum. Clicking any sample point in the bottom plot shows a small tooltip with that sample's exact time and amplitude value.
Implementation: p5.js. Compute the continuous sine wave analytically each frame; compute sample points by evaluating the same sine function only at intervals of `1 / samplingRate`. Redraw both plots fully each frame from current slider values so the display always reflects live parameter changes. Parent the canvas to the enclosing `<div>` and recompute plot dimensions inside `windowResized()`.