Limiter

Keeps the sound under a ceiling. The input gain pushes the level against it, and what goes over is held down. 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/limiter

Controls

Panel

The panel draws the transfer curve against the straight line of a clean sound. Drag the handle up and down for the ceiling and across for the input gain.

Copy
import { LimiterPanel } from "@/components/audio-ui/devices/limiter/panel";
import { limiterDevice } from "@/components/audio-ui/devices/limiter/device";

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

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

Engine

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

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

The engine is the browser's compressor node at a ratio of 20 with no knee, then a hard clip. The node adds a make-up gain of its own that cannot be turned off, so the engine takes it back out, and a signal under the ceiling is only as loud as the gain makes it.

A ratio of 20 is not a wall. Measured in Chrome, with a ceiling of -1 dB and +24 dB in, the node alone reaches +0.6 dBFS. The final clip, oversampled 4x, keeps the samples at the ceiling: in the conformance page the peak is never more than 0.05 dB over it, for ceilings of -1, -6 and -12 dB and up to +36 dB in. The filter of the oversampling rings a little, so it is not exactly zero.

That is a sample peak, not an inter-sample (true) peak. It is not a substitute for a true-peak limiter on a master that is checked against a loudness standard.