Field notes

Notes of color, drifting in stereo

A drop-in player for every audio tag. The spectrogram starts off. Switch to a vertical waterfall or a horizontal river; slow the window to read vibrato. L − R shows only what is panned.

The script walks the page and wraps every audio element. No extra libraries. Open a layout when you want the picture; drag to seek.

Amber Lattice

A C–A–F–G pass in sixteenth notes. The left channel climbs the chord; the right descends it. Harmonics stack as paler copies of the same color, so the lattice is readable as both rhythm and voicing.

Glass Canon

A two-voice canon in A. The leader sits hard left; the follower enters two beats later, a fifth above, hard right. Watch the delayed ribbon of color appear on the right, offset in time.

Circle House

Eight major-seventh pads walking the circle of fifths. Root and fifth lean left; third and seventh lean right. Each new chord is a new set of colored bands holding still, then releasing.

Astro, or any page

One script. Keep your markdown.

Put chroma-drift.js in your site’s public folder and load it from the layout. Leave the audio tags your markdown already emits — the player wraps every instance on the page.

<script src="/chroma-drift.js" type="module"></script>

<p><audio controls src="/images/track.opus"></audio></p>

Same origin. Files in public/ analyse cleanly. Cross-origin audio needs CORS.
Layout. Off by default. Vertical is a waterfall (pitch across, time down). Horizontal is the older river (time across, pitch down). The window slider stretches time without letterboxing.
L − R. Subtracts the channels at each pitch and time. Mint is left-heavy, azure is right-heavy, centered sound cancels to black.
Pitch color. Twelve hues, one per pitch class, at eight samples per semitone so vibrato and portamento read as curves, not steps.