Arrangement
Transport and mixer
EQ and filters
Modulation
Utility
Instruments
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.