Audio Output Signal Chain¶
Specification¶
The full specification below is extracted from Chapter 18: Audio Signal Processing, Sound Classification, and Speech I/O.
Type: graph-data-model
**sim-id:** audio-output-signal-chain<br/>
**Library:** vis-network<br/>
**Status:** Specified
Learning objective: Students will *understand* (Bloom L2: Understand) the order and role of each hardware stage that converts a digital audio signal into physical sound, and the form the signal takes at each stage.
Canvas: 700x350px, responsive — vis-network's built-in `autoResize` option combined with a `window.addEventListener('resize', ...)` call to `network.redraw()`.
Layout: a left-to-right hierarchical vis-network graph with five nodes: "Raspberry Pi 5 (I2S source)," "I2S Audio Interface," "PCM5102 DAC," "Amplifier Module," "Speaker Output," connected by directional edges. Each edge is labeled with the signal type at that hop: "digital I2S data" (Pi 5 to interface), "digital I2S data" (interface to DAC), "analog voltage, weak" (DAC to amplifier), "analog voltage, boosted" (amplifier to speaker), "sound wave" (speaker to open air, drawn as a dashed edge to an unlabeled endpoint).
Controls: a single `createButton()`-equivalent HTML button labeled "Reset" that closes any open infobox (vis-network runs inside a plain `<div>`, so this can be a normal DOM button rather than a p5.js control).
Interaction: clicking any node opens an infobox below the diagram with that stage's one-sentence definition, matched to the surrounding chapter prose, plus one common troubleshooting tip (clicking "Amplifier Module" shows the grounding/hum tip from the text above). Hovering any edge shows its signal-type label as a tooltip, using vis-network's built-in `title` property on edges.
Implementation: vis-network with a `hierarchical` layout option set to left-to-right direction, fixed node positions disabled so the layout engine spaces nodes evenly. Use `network.on("click", ...)` to detect node clicks and `network.on("hoverEdge", ...)` for edge tooltips. Node data stored as a small array of objects with `id`, `label`, `definition`, and `tip` fields for easy infobox lookup.