Audio UI
A plucked guitar string. A pick strikes it, a burst brighter the harder it is picked, and the string rings and fades, its highs dying first, as a real string's do. It is in tune to the cent at every pitch, so it plays along with the other instruments. The body warms its low end, a tone control darkens the lot, and the palm can mute the strings for short, dry notes. It is a device: a state, a panel, an engine and tools, each its own file.
Installation
pnpm dlx shadcn@latest add @audio-ui/guitar
It installs the device's state, its engine and its panel to components/audio-ui/devices/guitar/. The demo above, which wires them to a loop, is @audio-ui/block-guitar.
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 lays out the string's tone, decay and palm mute, the body and the volume, and has a keyboard from the open low E up three octaves, E2 to E5, that picks the strings. 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 { GuitarPanel } from "@/components/audio-ui/devices/guitar/panel";
import { guitarDevice } from "@/components/audio-ui/devices/guitar/device";
const [state, setState] = useState(() => guitarDevice.defaults());
<GuitarPanel onValueChange={setState} value={state} />;Engine
Create it, connect it and update it as for any device: see The engine.
engine.noteOn({ frequency: 196, velocity: 0.8 }); // G3, picked
engine.noteOff(); // the fretting hand lifts off
// Scheduled ahead on the audio clock, by a host that plays notes from a song:
engine.noteOn({ frequency: 329.63 }, { at: time, id: "e4" });
engine.noteOff({ at: time + length, id: "e4" });An engine plays one string. 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 picks the string at its pitch, louder and brighter the higher its velocity, and it rings for the decay, shortened by the palm mute, however long the note is held; let go before, and the string falls silent at once. A note while one sounds cuts it and picks anew, and a noteOff whose id is not the sounding note's lets nothing go. The tone, the body and the volume move a ringing string; the decay and the mute take the next. The string is drawn when its note comes, as samples, by stringSamples, which the engine exports. An agent plays the guitar with the play tool.