# useAudioSignal

> An AnalyserNode as live signals for a waveform: the loudest sample of the moment, frequency bands and the raw samples, read every frame without re-rendering

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

```ts
import { useAudioSignal } from "@/hooks/use-audio-signal";
```

- Files: `hooks/use-audio-signal.ts`
- Depends on: nothing; npm: `@audio-ui/engine`
- Used by: nothing

| Export | Kind | What it is |
| --- | --- | --- |
| `AudioSignalSource` | interface | A live signal of levels, 0-1 each, in the shape of an external store. |
| `AudioSignal` | interface |  |
| `UseAudioSignalOptions` | interface |  |
| `useAudioSignal` | function | Reads an AnalyserNode every animation frame (paused automatically while the tab is in the background) into three live signals: `level`, the loudest sample of the moment; `bands`, the spectrum as log-spaced frequency bands; and `samples`, the raw waveform. |

## Usage

An `AnalyserNode` as three live signals for a live waveform: `level`, the loudest sample of the moment, for a waveform that scrolls; `bands`, the spectrum as log-spaced bands, for bars that dance; and `samples`, the raw waveform, for a scope. Each is read only while something is subscribed to it.

```tsx
import { LiveWaveform } from "@/components/audio-ui/waveform";
import { useAudioSignal } from "@/hooks/use-audio-signal";

const signal = useAudioSignal(analyser, { bandCount: 32 });

<LiveWaveform source={signal.level} />;
<LiveWaveform shape="scope" source={signal.samples} />;
```

It returns stable sources, so sampling never re-renders the component that calls it; without an analyser they fall silent. See [Waveform](/docs/components/base/waveform#live-signals).