Transient shaper

Shapes the attack and the sustain of a sound, at any level. A drum gains click or loses it, and a pluck rings longer or shorter. There is no threshold, so a quiet hit and a loud one are shaped alike. 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/transient

Controls

Panel

The panel is a square with the sustain across and the attack up, and one handle to drag to both at once. The centre is a sound left as it is.

Copy
import { TransientPanel } from "@/components/audio-ui/devices/transient/panel";
import { transientDevice } from "@/components/audio-ui/devices/transient/device";

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

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

Engine

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

The browser has no such node, so a detector reads the signal as an AudioWorklet and writes the gain to apply. It follows the peak of the signal, which jumps up and falls over 15 ms so a low note does not ripple it, and the same peak smoothed over 25 ms. They meet when a sound holds and part when a hit starts. How far the peak is over the smoothed one says how much of the moment is attack (6 dB or more is all of it), and the rest is sustain. Only the shape of the envelope counts, not its level.

The audio waits a millisecond for the detector, so the gain is up when a hit arrives. That is the latency of the device.

Measured in Chrome on a decaying tone, the sustain moves the tail by what the control says, to the hundredth (+9 gives +9.00 dB and -9 gives -9.00 dB at 60, 200 and 2000 Hz). The attack leaves the tail alone, and +9 on the attack raises the first peak by 8.7 dB, at a level of -6 dB or of -26 dB alike. Taking the attack down lowers the peak by 6 to 7 dB for -9, since the gain needs a moment to fall.