Audio UI
A tape-replay keyboard. Under each of its 35 keys, G2 to F5, lies a strip of tape with one note recorded on it, on three tracks: flutes, strings and a choir; the track switch chooses the one the heads read. Press a key and its tape runs past the head; hold it for eight seconds and the tape runs out, and the note stops however long the key stays down. Each key's strip is a little off in pitch and level from its neighbours, the tape hisses while it runs, the capstan's wow and flutter bend the pitch, and a tone control darkens the lot. The keys are not touch-sensitive: the tape plays at the level it was recorded. It is a device: a state, a panel, an engine and tools, each its own file.
Installation
pnpm dlx shadcn@latest add @audio-ui/tape-keys
It installs the device's state, its engine and its panel to components/audio-ui/devices/tape-keys/. The demo above, which wires them to a loop, is @audio-ui/block-tape-keys.
Controls
Every number reads 0 to 10, as a panel's sliders do, and shows the value it sets in the unit the sound takes.
Controls · 5
Panel
The panel switches the track in its title bar, lays out the tape's speed, wow and tone and the volume, and has the 35 keys that play the tapes. With activeNotes, the notes held now, such as on a MIDI keyboard, light up their keys. The panel sends notes out and does not make the sound, so it plays through any engine.
import { TapeKeysPanel } from "@/components/audio-ui/devices/tape-keys/panel";
import { tapeKeysDevice } from "@/components/audio-ui/devices/tape-keys/device";
const [state, setState] = useState(() => tapeKeysDevice.defaults());
<TapeKeysPanel onValueChange={setState} value={state} />;Engine
Create it, connect it and update it as for any device: see The engine.
engine.noteOn({ frequency: 261.63 }); // C4's tape runs
engine.noteOff(); // the pads let go of it
// Scheduled ahead on the audio clock, by a host that plays notes from a song:
engine.noteOn({ frequency: 440 }, { at: time, id: "a4" });
engine.noteOff({ at: time + length, id: "a4" });An engine plays one key's tape, through its own tape path. For chords, make as many as the notes you hold and give each note its own: the arrangement's engine does it for a MIDI track, and the block above keeps eight. A note plays the key nearest its pitch, and a pitch outside the 35 keys plays nothing. A key's tape runs for eight seconds at most; let go before, and the pads let go of the tape at once. A note while one is held cuts it and runs anew, and a noteOff whose id is not the held note's lets nothing go. The speed, the wow and the tone move a held key; the track takes the next. An agent plays the keyboard with the play tool.