---
title: De-esser
description: "A de-esser device: frequency, threshold, ratio, range and listen, a panel that draws what it does at each frequency, a Web Audio engine and tools for agents."
component: true
base: base
---

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

Softens the sharp s and t of a voice. The signal is split at a frequency, and when the highs above it go over the threshold they are taken down, never by more than the range. 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-deesser
```

</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/deesser-device @audio-ui/deesser-panel @audio-ui/deesser-engine
```

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

<ComponentSource
  styleName="base-nova"
  name="block-deesser"
  title="components/examples/block-deesser.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. |
| Frequency | 2 kHz to 12 kHz | 6.5 kHz | Where the highs start. Drag the handle on the plot across to set it. |
| Threshold | -60 dB to 0 dB | -32 dB | The level of the highs above which they are taken down. |
| Ratio | 1:1 to 20:1 | 6:1 | How much the highs are brought down above the threshold. |
| Range | 0 dB to 24 dB | 12 dB | The most the highs are taken down. Drag the handle down to raise it. |
| Listen | On or off | Off | Plays only the highs, to find where the sibilants sit. |

## Panel

The panel draws what the device does at each frequency at full reduction. The handle sits on the curve at the frequency: drag it across for the frequency and down for the range. `deesserResponse(state)` is the curve the panel draws.

```tsx
import { DeesserPanel } from "@/components/audio-ui/devices/deesser/panel";
import { deesserDevice } from "@/components/audio-ui/devices/deesser/device";

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

<DeesserPanel 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.reduction; // dB taken off the highs, read per frame
```

Two biquads in a row make each half of a Linkwitz-Riley split, whose low and high halves add back to a flat response when nothing is taken down. A detector reads the highs and writes the gain they get. It is the one of the compressor's [sidechain](/docs/devices#sidechain), with a soft knee of 3 dB, an attack of 0.5 ms and a release of 60 ms. A table keeps the gain from going under the range.

Measured in Chrome, with nothing over the threshold the output is within 0.01 dB of the input from 200 Hz to 12 kHz. At full reduction a 10 kHz tone goes down by 5.1, 9.6 and 15.7 dB for ranges of 6, 12 and 24 dB, which is the curve the panel draws, to the hundredth.