# useDeviceLoop

> A short loop of drums and plucked notes played through an effect's engine and out to a destination, for a block to show what a device does: it plays while the session's play switch is on, the engine is made for it and follows the state (use-device-engines), and analysers of what goes in and comes out are there for a meter or a spectrum.

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

```ts
import { useDeviceLoop } from "@/hooks/use-device-loop";
```

- Files: `hooks/use-device-loop.ts`
- Depends on: `demo-sound`, `use-demo-source`, `use-device-engines`, `use-play-switch`, `web-audio`; npm: `@audio-ui/engine`
- Used by: `block-auto-pan`, `block-bass-enhancer`, `block-binaural-panner`, `block-channel-eq`, `block-chorus`, `block-compander`, `block-compressor`, `block-deesser`, `block-delay`, `block-distortion`, `block-ducker`, `block-equalizer`, `block-exciter`, `block-expander`, `block-filter`, `block-frequency-shifter`, `block-gate`, `block-graphic-eq`, `block-limiter`, `block-lofi`, `block-mid-side`, `block-multiband`, `block-overdrive`, `block-phaser`, `block-redux`, `block-reverb`, `block-rotary`, `block-saturator`, `block-stutter`, `block-tilt-eq`, `block-transient`, `block-unlimiter`, `block-utility`, `block-vibe`, `block-wah`, `use-pulses-through-compressor`

| Export | Kind | What it is |
| --- | --- | --- |
| `UseDeviceLoopOptions` | interface |  |
| `useDeviceLoop` | function | A short loop of drums and plucked notes played through an effect's engine and out to a destination, for a block to show what a device does. |

## Usage

A short loop of drums and plucked notes played through an effect's engine and out to a destination: what a device does, heard. It plays while the play switch of its [session](/docs/hooks/use-audio-session) is on, so the play button belongs to the host, and it is silent outside one.

```tsx
import { createCompressorEngine } from "@/components/audio-ui/devices/compressor/engine";
import { useDeviceLoop } from "@/hooks/use-device-loop";
import { useMasterBus } from "@/hooks/use-master-bus";
import { useSpectrum } from "@/hooks/use-spectrum";

const output = useMasterBus(0.7);
const { analyser, engine, input } = useDeviceLoop({ create: createCompressorEngine, destination: output, state });
const spectrum = useSpectrum(analyser); // what comes out
```

The engine is made when the loop starts and disposed when it stops ([`useDeviceEngines`](/docs/hooks/use-device-engines)), following `state` and the tempo of the sound it plays, for a time parameter synced to it. `key` feeds the engine's `sidechain` with the kick that goes with the sound, as a ducker needs. `source` picks the sound unless the session has another chosen (see [`useDemoSource`](/docs/hooks/use-demo-source)).

**Returns**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `engine` | `Engine \| null` |  | The engine while the loop plays: read what it measures, such as a gain reduction. |
| `input, analyser` | `AnalyserNode \| null` |  | What goes in, at the level the engine hears it, and what comes out. |
| `playing, tempo` | `boolean, Tempo` |  | Whether it plays, and the tempo of its sound. |