Pocket synth

One oscillator through a resonant filter. Press the pad: the pitch goes across and the filter cutoff goes up. It is a device: a state, a panel, an engine and tools, each its own file.

Installation

bunnpmpnpmyarn
Copy
pnpm dlx shadcn@latest add @audio-ui/pocket-synth

Controls

Panel

The panel has a pad that plays the synth: its position gives the note, so the pitch goes across and the cutoff goes up. pocketSynthPitch(position) and pocketSynthCutoff(position) turn a position from 0 to 1 into hertz. The panel sends notes out and does not make the sound, so it plays through any engine.

Copy
import { PocketSynthPanel } from "@/components/audio-ui/devices/pocket-synth/panel";
import { pocketSynthDevice } from "@/components/audio-ui/devices/pocket-synth/device";

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

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

Engine

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

Copy
engine.noteOn(note); // starts a note, or glides the one being held
engine.noteOff(); // lets it go

One voice at a time. noteOn starts a note, or glides the one being held to the new one, and noteOff releases it. The wave and the filter type of a state change under a held note. An agent plays the synth with the play tool.