Lab

Electric piano

A tine electric piano device: a body that barks, a bell that pings, a pickup that can be driven and a tremolo, with four presets, a panel with a keyboard, a Web Audio engine and tools for agents.

Audio UI

A tine electric piano. A key strikes a tine and a pickup hears it ring: a body on the same pitch, which barks when the key is struck hard, and a bell fourteen times up, which pings and is gone in a tenth of a second. The note rings down by itself, longer in the bass, through a pickup that can be driven and a tremolo. Start from one of its four presets (Warm, Bell, Bark, Mellow), then shape it. It is a device: a state, a panel, an engine and tools, each its own file.

Installation

pnpm dlx shadcn@latest add @audio-ui/electric-piano

It installs the device's state, its engine and its panel to components/audio-ui/devices/electric-piano/. The demo above, which wires them to a loop, is @audio-ui/block-electric-piano.

Controls

Every control reads 0 to 10, as a panel's knobs do, and shows the value it sets in the unit the sound takes.

Controls · 7

Panel

The panel loads a preset from the menu in its title bar, lays the controls out by what they do (tone, pickup, tremolo, output) and has a keyboard of two octaves that plays the piano. electricPianoPreset(name) gives a preset's whole state, and ELECTRIC_PIANO_PRESETS lists them. 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 { ElectricPianoPanel } from "@/components/audio-ui/devices/electric-piano/panel";
import { electricPianoDevice } from "@/components/audio-ui/devices/electric-piano/device";

const [state, setState] = useState(() => electricPianoDevice.defaults());

<ElectricPianoPanel onValueChange={setState} value={state} />;

Engine

Create it, connect it and update it as for any device: see The engine.

engine.noteOn({ frequency: 261.63, velocity: 0.9 }); // strikes a key
engine.noteOff(); // lets it go: it falls silent in a fifth of a second

// 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 voice. 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 ten. A note rises in three milliseconds and rings down by itself, even held; its bark and its bell are as bright as the key is hard. Let go, it falls silent from where it got to. A key struck again while its note rings cuts it and strikes anew. A note already ringing keeps the timbre it was struck with, while the drive, the tremolo and the volume move under it. An agent plays the piano with the play tool.

Built by Ouest Labs, the source code is available on GitHub.
RSS