Skip to content
Pedagogy

Sonogram

Ultrasound for songs

A classroom listening bench that produces a sonic image of any song a student uploads. Fast path: center-channel or sides-only via the mid/side trick, instantly. Slow path (opt-in): real per-instrument stem separation — vocals, drums, bass, and everything else — via a Demucs neural network running fully in the browser. Chorus-region loop, four device presets wired to the mourning-week vocabulary. Nothing is ever uploaded.

Built for
Music-appreciation students and their teachers
Tech
Astro Web Audio API Canvas Demucs v4 ONNX Runtime Web
Sonogram PREVIEW

Preview · screenshot coming

What it does

Sonogram is a browser-based listening bench, designed to give a gen-ed music-appreciation student the ability to hear inside a recorded song without any of the usual costs — no DAW, no notation-reading, no singing in front of a room, no upload to a stranger’s server.

A student drops in a song they know. The tool decodes it locally and offers three ways to listen:

  • Full mix — the record as released.
  • Center only — what sits dead-center in the stereo field: usually the lead vocal, the kick, the snare, the bass. The vocal steps forward.
  • Sides only — what was panned outward: the pads, the doubles, the reverb tails, most guitars. The vocal usually disappears.

Layered on top: a chorus-region selector (drag on the waveform to loop a section), a device-preset row that pairs a channel choice with a pre-cue prompt from the mourning-archetype week, and an honest aside about the technique’s limits.

The technique, plainly

The tool uses the classic mid/side trick: mid = (L+R)/2 for the centered content, side = (L-R)/2 for the sides. It’s the same math old-school karaoke machines used to strip lead vocals. It works cleanly when the vocal is dead-center in the mix — which is the pop-mix default — and it fails audibly when the vocal is doubled to the sides or drenched in stereo reverb. That failure is teaching content too: it tells the room that the engineer made a decision about where in the field this voice was supposed to sit.

Real per-instrument stem separation is also available as an opt-in second gear: a Separate stems button below the mid/side controls will download HT-Demucs v4 (~172 MB, cached after the first run) and separate the song into four tracks — vocals, drums, bass, and everything else — via demucs-web and ONNX Runtime Web running entirely in the browser. Expect a few minutes of processing per song. See splitter-fm-integration.md for the pedagogical spiral that motivated wiring this in.

Where it plugs into the classroom

The four device-preset buttons come straight from the mourning-archetype week (docs/mourning-archetype-lectures.md):

  • Descending line — center-only, pre-cued to follow the vocal melody down across a phrase.
  • Sigh figure — center-only, pre-cued to catch the reach-and-fall on the heavy word.
  • Emptying out — sides-only, pre-cued to hear what the arrangement is doing when the voice is gone.
  • Plagal cadence — sides-only, pre-cued to hear the “amen” motion underneath.

The same tool serves the next archetype week (defiance, homecoming, longing) with a different preset row — the mechanism is stable across archetypes because the four MUSIC 5 listening elements are.

Why the name

Sonograms are the imaging tool doctors use to look inside a body without cutting it open. This tool does the same for a song: produces a sonic image of an arrangement without harming the original. Also: it plays fair with the doubled meaning of “sono” — sound in Latin, song in casual usage.

Privacy

Nothing is uploaded. Nothing is stored. The song is decoded in-browser via the Web Audio API; when the tab closes, so does the audio. This is the same posture as Pattern Lab — a listening prosthetic that respects the student’s library.