Audio Preprocessing Pipeline Flow¶
Specification¶
The full specification below is extracted from Chapter 18: Audio Signal Processing, Sound Classification, and Speech I/O.
Type: workflow-diagram
**sim-id:** audio-preprocessing-pipeline-flow<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/linear-algebra/tree/main/docs/sims/ml-pipeline<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) the stages of an audio preprocessing pipeline from microphone capture to model inference, and identify the data format that exists at each stage boundary.
Canvas: 700x340px, responsive — stack boxes into two rows of three on screens narrower than 560px instead of one row of six.
Layout: six connected boxes drawn left to right with directional arrows between them: "Microphone Capture" → "Audio Buffer" → "FFT" → "Feature Extraction (MFCC)" → "Model Inference" → "Confidence Score / Decision." Each box uses a distinct accent color from the book's palette (raspberry `#C2185B`, indigo `#3F51B5`, circuit green `#2E7D32`, copper gold `#D4AF37`, cycling through the set).
Controls: none beyond click interaction; a small `createButton()` labeled "Close Info" dismisses any open infobox.
Interaction: clicking any box opens an infobox beneath the diagram showing that stage's one-sentence definition (matching the surrounding chapter prose) plus the data format at that point in the pipeline — e.g., clicking "Audio Buffer" shows "512 raw sample values"; clicking "Feature Extraction (MFCC)" shows "13-40 MFCC values." Hovering an arrow between two boxes shows a tooltip with that stage's typical time cost, pulled from the latency table later in the chapter (e.g., hovering the arrow into "FFT" shows "Milliseconds, grows with buffer size"). Only one infobox is open at a time.
Implementation: p5.js, boxes and arrows laid out from a small array of stage objects `{name, dataFormat, timeCost, color}` with x-position computed as a fraction of `width` so the layout reflows on `windowResized()`. Hit-testing via rectangular bounds around each box.