Lab

Drum Synth

A synthesized drum device: a kick, a snare, a clap, a closed or an open hat, a tom, a rim or a cymbal from oscillators and noise, tuned, with its decay, tone and snap, a panel with a pad, a Web Audio engine and tools for agents.

Audio UI

A drum made of sound, not of a sample. Pick its voice, a kick, a snare, a clap, a closed or an open hat, a tom, a rim or a cymbal, and shape it: its tuning, how long it rings, how bright it is and how sharp its attack. Each voice is a sine whose pitch falls, filtered noise, or both, and a harder hit is louder and brighter, so a pattern's accents sound as accents. It is what a drum rack's pad plays: one Drum Synth per pad, each with its own chain of effects. It is a device: a state, a panel, an engine and tools, each its own file.

Installation

pnpm dlx shadcn@latest add @audio-ui/drum-synth

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

Controls

Every number but the tuning reads 0 to 10, as a panel's sliders do, and the middle is the voice as it comes.

Controls · 6

Panel

The panel lays out the voice and its tuning, the decay, the tone and the snap, the volume, and a pad that strikes it, harder near its top. With activeNotes, the notes held now, such as on a MIDI keyboard or from a sequencer, the pad lights up. The panel sends its strikes out and does not make the sound, so it plays through any engine.

import { DrumSynthPanel } from "@/components/audio-ui/devices/drum-synth/panel";
import { drumSynthDevice } from "@/components/audio-ui/devices/drum-synth/device";

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

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

Engine

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

engine.noteOn({ velocity: 0.9 }); // a hit, hard

// Scheduled ahead on the audio clock, by a host that plays a pattern:
engine.noteOn({ velocity: 0.4 }, { at: time });

One engine plays every hit: each is made when it comes, from the state at that moment, and rings for its decay whatever the note's length, so noteOff lets nothing go. To cut a hat short, as an open hat is when the closed one is struck, a drum rack puts its pads in a choke group. The noise every hit reads from is made once per audio context, each hit starting somewhere else in it, so no two sound alike. The volume moves what rings; the other controls take the next hit. An agent strikes it with the play tool.

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