Channel EQ

A channel EQ device: a low shelf, a sweepable mid bell, a high shelf, a high-pass switch and an output level, a panel with a handle on the mid band, a Web Audio engine and tools for agents.

Audio UI

The EQ of a mixer strip, simpler than the equalizer: a low shelf, a mid bell you sweep, a high shelf and a high-pass for the rumble. It is a device: a state, a panel, an engine and tools, each its own file.

Installation

pnpm dlx shadcn@latest add @audio-ui/channel-eq

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

Controls

Controls · 7

Panel

The panel draws the curve of the four filters and the output level, with a handle on the mid band.

import { ChannelEqPanel } from "@/components/audio-ui/devices/channel-eq/panel";
import { channelEqDevice } from "@/components/audio-ui/devices/channel-eq/device";

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

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

Engine

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

Four filters in series and an output gain, the same the curve draws. With the high-pass off, it is a 10 Hz high-pass, which passes the whole spectrum, so the curve and the sound agree. channelEqBands(state) gives the filters.

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