Interface studies · Listening Room 001
LISTENING LIBRARY · ROOM 001
Player studies
Four editorial treatments of one sound, built for the Listening Room.
Derek Jerome supplied this audio so the Listening Room player could be developed against real material. All four studies use the same file, the same timestamps and the same paragraph, so the comparison stays about how a reader meets the sound rather than about the sound itself.
Derek-provided test audio · interface study · not a finished Chance of Katz piece
Sound as Footnote
Closest to reading an essay. The reference behaves like a sidenote; the waveform only answers when called.
Derek supplied this audio so the Listening Room player could be developed against real sound. Try the references at , and to compare direct seeking, annotation and the relationship between listening and writing.
Waveform drawing unavailable offline — the timestamps still play.
Annotated Score
A diagram you can read before you play it. Prose and score point at the same three moments from opposite directions.
Derek supplied this audio so the Listening Room player could be developed against real sound. Try the references at , and to compare direct seeking, annotation and the relationship between listening and writing.
Waveform drawing unavailable offline — the timestamps still play.
Sound Inside the Sentence
How little can a player be and still be understood? Everything lives in the typography; the waveform is a trace left behind.
Derek supplied this audio so the Listening Room player could be developed against real sound. Try the references at , and to compare direct seeking, annotation and the relationship between listening and writing.
Waveform drawing unavailable offline — the timestamps still play.
Listening Object
For a complete piece: artwork, text, sound and annotation in one object — with enough air that it cannot be mistaken for an embed.
Working player study
This study uses Derek's test file to try a larger listening object: playback, seeking and editorial annotation held in one frame. The audio is an interface study, not a finished Chance of Katz piece.
Derek supplied this audio so the Listening Room player could be developed against real sound. Try the references at , and to compare direct seeking, annotation and the relationship between listening and writing.
Waveform drawing unavailable offline — the timestamps still play.
Developer note
What is shared
All four run on one architecture in audio.js: one locally hosted WaveSurfer
instance per track, attached by media: to a native
<audio> element, drawn from the precomputed peaks in
peaks.js with a fixed duration, so nothing is decoded in
the browser. Playback is driven through the audio element rather than through
WaveSurfer — the waveform stays a drawing and a click-to-seek surface, and every
real control is a native <button>. A small registry pauses any
other room when one starts, so only one track ever sounds. Markers are ordinary DOM
buttons placed at timestamp / duration × 100%, clamped at the edges and
dropped to a second row when labels would collide. Nothing autoplays; transitions
are skipped under prefers-reduced-motion.
What changes between variants
- Waveform height, bar width and cursor (26 / 76 / 10 / 96px) — a five-line map in
VARIANTS. - Whether the marker layer exists, and whether it shows ticks only, ticks plus phrases, or nothing until activated.
- Where the sound block sits relative to the paragraph: after it, before it, or dissolved into the line.
- How the prose timestamp is dressed — raised sidenote (01), flush reference (02), inline play object (03), doubled by an annotation list (04).
Which fits an editorial Listening Room
01 is the one that reads as an artist publication rather than a page with a player on it; the waveform earns its place by staying quiet until a sentence calls it. 04 is the right container when a piece deserves its own room. 02 is the most useful for close writing about sound but starts to argue with the prose for attention, and 03 is the most beautiful and the most fragile — a reader can miss it entirely.
What could combine
One system, three densities: the 01 footnote as the default behaviour anywhere sound is mentioned in a paragraph; 02's marker phrases available as an option on the same component when a passage is doing close listening; 04 as the page-opening object for a full piece, with the annotation list from 04 replacing 02's floating labels on narrow screens. 03 would survive as a modifier — the same footnote with its waveform suppressed — rather than as its own component.
Status
These are studies, not the finished Listening Room player. The audio is a Derek-provided test file used to develop and compare the interfaces; the sound for Chance of Katz is still in development. What gets carried into the room is the behaviour, not this recording.