Graphic EQ

Shapes the tone with ten bands an octave apart, from 31 Hz to 16 kHz, each on a fader of its own, as a graphic equalizer has them. For bands you place and widen yourself, use the equalizer. 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/graphic-eq

Controls

Each band boosts or cuts 15 dB. A band at 0 dB leaves its octave as it is.

Panel

The panel draws the curve the bands play together over a fader for each, as on a graphic equalizer, with the output knob beside them. graphicEqCurve(state) is the curve it draws, and graphicEqBands(state) the filters a state is.

Copy
import { GraphicEqPanel } from "@/components/audio-ui/devices/graphic-eq/panel";
import { graphicEqDevice } from "@/components/audio-ui/devices/graphic-eq/device";

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

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

Engine

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

The bands are those of @audio/eq-graphic: a bell at each octave centre of ISO 266, all as wide (a Q of 1.4), so they meet without a gap or a hump. Its bells are the Audio EQ Cookbook's, which a BiquadFilterNode of type peaking computes, so the engine is ten of those in series, then an output level. Off, every band goes flat and the level to 0 dB.