Ducker

Turns a sound down while another one plays: a voice over music, a kick under a pad. The other sound is the key, connected to the sidechain: it is only listened to, never heard. It plays the ducker of audio.js. 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/ducker

Controls

Panel

The panel draws the gain it puts on the sound for each level of the key, once it has settled, through the package's own compression curve: the threshold, a handle on it, and the range it never goes under.

Copy
import { DuckerPanel } from "@/components/audio-ui/devices/ducker/panel";
import { duckerDevice } from "@/components/audio-ui/devices/ducker/device";

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

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

Engine

Create it, connect it and update it as for any device: see The engine. Connect the key to engine.sidechain; see Sidechain.

Copy
engine.reduction; // dB being taken off, read per frame

The browser has no ducker node. The engine plays the processor of @audio/dynamics-ducker's manifest as published, in an AudioWorklet with two inputs, the sound and the key, fed only while it plays: off, or until the worklet is ready, the sound goes round it. With nothing on the sidechain, it follows the sound itself, as a compressor would. The threshold, the ratio, the knee and the range change as it plays. A new attack or release builds it again: at most every 50 ms, the new one first playing the last 100 ms of the sound and of the key, then taking over in a 30 ms fade.

Measured with a tone under an 80 Hz key, the sound is turned down to within 0.7 dB of the curve, at every level of the key: 7.5 dB drawn for a key at -20 dB, 6.8 dB heard.