Gate

Cuts the sound between hits. Above the threshold the signal passes, and below it the signal is turned down to the floor. With the sidechain on, a kick can open a held chord. 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/gate

Controls

Panel

The panel draws the transfer curve against the straight line of a clean sound, with a handle on the threshold. With the sidechain on, the curve is not drawn, because what the gate does depends on the other signal. The plot then keeps the threshold, which is a level of the sidechain.

Copy
import { GatePanel } from "@/components/audio-ui/devices/gate/panel";
import { gateDevice } from "@/components/audio-ui/devices/gate/device";

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

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

Engine

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

The browser has no gate node, so the engine measures the level with an AudioWorklet that writes the gain to apply. The level is a peak follower. The gate is open while the level is over the threshold and for the hold after it, and the gain moves toward 1 or the floor with the attack or the release as a time constant.

A delay in front of the gain is the look-ahead. The detector reads the signal before it, so the gate is open when a transient arrives. gateSettings(state) gives the numbers the engine puts on its nodes.

Measured in Chrome, a hold of 100 ms keeps a quiet tone open for the 100 ms after a burst and then closes it to the floor, and 5 ms of look-ahead lets the first millisecond of a burst through at 0.50 instead of 0.26.