Equalizer

Shapes the spectrum with four bands in series, then an output level. The panel draws the filters the engine runs, so what you see is what you hear. 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/equalizer

Controls

Panel

The curve is the sum of the four filters and the output level. Each band has a handle on it: drag it to set the frequency and the gain of the band, and it follows the pointer one to one. A cut or a notch has no gain, so its handle only slides. Double-click a handle to flatten the band.

Pick a band by its number or its handle, and its type, frequency, gain and width appear under the curve, the unused ones drawn off. Pass a spectrum (from useSpectrum, see Analysis) to draw the level of the sound behind the curve.

The type of a band decides what it uses:

The cuts are 12 dB per octave, which is what a browser filter node does.

Copy
import { EqualizerPanel } from "@/components/audio-ui/devices/equalizer/panel";
import { equalizerDevice } from "@/components/audio-ui/devices/equalizer/device";

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

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

Engine

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

Four BiquadFilterNodes in series and an output gain. The curve is drawn from the same formulas the node runs, and the width of a band goes through toWebAudioQ on the way to the node, so the two agree. Off, every band goes flat and the output goes to 0 dB.

Measure your engine

A host that brings its own engine can check it against what the panel draws. See Measure your engine: it works for the equalizer, the filter and the channel EQ.