# useSpectrum

> The spectrum of an AnalyserNode as a live source for Plot.Trace: dB per point on a logarithmic frequency axis, refreshed every frame without re-rendering, and its held peaks as a second source

```bash
npx shadcn@latest add @audio-ui/use-spectrum
```

```ts
import { useSpectrum, useSpectrumPeaks } from "@/hooks/use-spectrum";
```

- Files: `hooks/use-spectrum.ts`
- Depends on: nothing; npm: `@audio-ui/react`, `@audio-ui/engine`
- Used by: `block-channel-eq`, `block-deesser`, `block-equalizer`, `block-filter`, `block-multiband`, `block-overdrive`, `plot-demo`, `spectrum-analyzer`, `spectrum-analyzer-demo`

| Export | Kind | What it is |
| --- | --- | --- |
| `UseSpectrumOptions` | interface |  |
| `useSpectrum` | function | The spectrum of an `AnalyserNode` as a live source for a plot's `Plot.Trace`: dB per point along a logarithmic frequency axis, refreshed every frame while the analyser is there, with no React render per frame. |
| `useSpectrumPeaks` | function | The peaks of a spectrum `source`, as a live source of their own: each point keeps the loudest level it reached for `hold` seconds, then falls at `fall` dB per second. |

## Usage

```tsx
import { useSpectrum, useSpectrumPeaks } from "@/hooks/use-spectrum";

const analyser = ctx.createAnalyser();
analyser.fftSize = 8192; // finer low end
output.connect(analyser);

const spectrum = useSpectrum(analyser, { minHz: 20, maxHz: 20000 });
const peaks = useSpectrumPeaks(spectrum, { hold: 1, fall: 24 });

<SpectrumAnalyzer aria-label="Spectrum" peaks={peaks} source={spectrum} />;
```

`useSpectrum` gives dB per point along a logarithmic frequency axis, 160 points from 20 Hz to 20 kHz unless told otherwise. Draw it with the [Spectrum analyzer](/docs/components/base/spectrum-analyzer), or as a trace on a [Plot](/docs/components/base/plot) behind an equalizer's curve. `useSpectrumPeaks` keeps each point's loudest level for `hold` seconds, then lets it fall at `fall` dB per second.