---
title: Multiband compressor
description: "A multiband compressor device: two splits into three bands, a threshold and a ratio for each, a shared attack and release, a panel that draws the bands, a Web Audio engine and tools for agents."
component: true
base: base
---

<ComponentPreview styleName="base-nova" name="block-multiband" />

Compresses three bands apart. The signal is split at two frequencies into low, mid and high, and each band has its own threshold and ratio. A loud bass does not pump the highs, and a harsh band can be held down without dulling the rest. It is a [device](/docs/devices): a state, a panel, an engine and tools, each its own file.

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

```bash component
npx shadcn@latest add @audio-ui/block-multiband
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Install the packages:</Step>

```bash
npm install @audio-ui/react @audio-ui/core
```

<Step>Add the pieces you want. All of them, or only the state and the panel if your engine is elsewhere:</Step>

```bash
npx shadcn@latest add @audio-ui/multiband-device @audio-ui/multiband-panel @audio-ui/multiband-engine
```

<Step>Copy and paste the demo that wires them, if you want it.</Step>

<ComponentSource
  styleName="base-nova"
  name="block-multiband"
  title="components/examples/block-multiband.tsx"
/>

</Steps>

</TabsContent>

</CodeTabs>

## Controls

| Control | Range | Default | What it does |
| --- | --- | --- | --- |
| On | On or off | On | Turns the device on. Off, the signal passes through unchanged. |
| Low split | 40 Hz to 1 kHz | 200 Hz | The frequency between the low band and the mid band. Set it with the left handle on the plot. |
| High split | 1.2 kHz to 12 kHz | 3 kHz | The frequency between the mid band and the high band. Set it with the right handle on the plot. |
| Low threshold | -60 dB to 0 dB | -24 dB | The level above which the low band is compressed. |
| Low ratio | 1:1 to 20:1 | 3:1 | How much the low band is brought down above its threshold. |
| Mid threshold | -60 dB to 0 dB | -26 dB | The level above which the mid band is compressed. |
| Mid ratio | 1:1 to 20:1 | 3:1 | How much the mid band is brought down above its threshold. |
| High threshold | -60 dB to 0 dB | -28 dB | The level above which the high band is compressed. |
| High ratio | 1:1 to 20:1 | 3:1 | How much the high band is brought down above its threshold. |
| Attack | 0.5 ms to 100 ms | 10 ms | How fast a band is taken down once it is over its threshold. The three bands share it. |
| Release | 20 ms to 1000 ms | 150 ms | How fast a band comes back once it is under its threshold. The three bands share it. |
| Output | -12 dB to 12 dB | 0 dB | The level of the three bands added back together. |

## Panel

The panel draws the three bands against frequency, with a handle on each split to drag across. The splits have no knob. The two ranges do not overlap (40 to 1000 Hz and 1.2 to 12 kHz), so the splits can never cross. `multibandBands(state)` is what the panel draws: what each band keeps of the signal, in dB at each frequency.

```tsx
import { MultibandPanel } from "@/components/audio-ui/devices/multiband/panel";
import { multibandDevice } from "@/components/audio-ui/devices/multiband/device";

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

<MultibandPanel onValueChange={setState} value={state} />;
```

## Engine

Create it, connect it and update it as for any device: see [The engine](/docs/devices#the-engine).

```ts
engine.reductions; // { low, mid, high }: dB taken off each band, read per frame
```

Two biquads in a row make one Linkwitz-Riley filter, whose halves add back to a flat response. The low band also goes through the two halves of the high split, added, so that it is shifted in phase as the other two are and the three add back flat. Each band has its own detector, the one of the compressor's [sidechain](/docs/devices#sidechain), with a soft knee of 6 dB.

Measured in Chrome with all ratios at 1, the output is within 0.01 dB of the input from 60 Hz to 9 kHz. With a 100 Hz tone at -6 dB over a 6 kHz tone, a threshold of -30 dB at 8:1 on the low band takes 16.4 dB off the bass and nothing off the highs. The same on the high band takes 10.6 dB off the highs and nothing off the bass.