# demo-sound

> The sounds the previews play, by name: Boom bap and Drone, with the kick that goes with the first. Drawn once in code and looped as a buffer, no samples.

```bash
npx shadcn@latest add @audio-ui/demo-sound
```

```ts
import { DEMO_TEMPO, DEMO_SOURCES, demoKey, demoTempo, renderDemoSource } from "@/lib/demo-sound";
```

- Files: `lib/demo-sound.ts`
- Depends on: `drum-synthesis`; npm: `@audio-ui/engine`
- Used by: `block-audio-editor`, `block-auto-pan`, `block-chorus`, `block-delay`, `block-device-chain`, `block-mixer`, `block-phaser`, `block-vibe`, `use-demo-source`, `use-device-loop`

| Export | Kind | What it is |
| --- | --- | --- |
| `DEMO_TEMPO` | const | The tempo of the loop, for a device that follows it: a delay synced to it echoes on the beat. |
| `DemoSource` | interface | A sound a preview can play: what it is called, what it is for, and how it is drawn for a sample rate. |
| `DEMO_SOURCES` | const | The sounds a preview plays, by name. |
| `DemoSourceName` | type |  |
| `demoKey` | function | The key that goes with a sound: a kick drawn on its own beats, so a gate opens on the kick of the scene it hears. |
| `demoTempo` | function | The tempo of a sound: what a delay synced to it echoes on. |
| `renderDemoSource` | function | The sound of a name, drawn for a sample rate and kept: the same buffer comes back each time. |

## Usage

`DEMO_SOURCES` holds the sounds by name, with a title and what to listen for. `renderDemoSource` draws one for a sample rate and keeps it, so the same buffer comes back each time.

```tsx
import { renderDemoSource } from "@/lib/demo-sound";

const buffer = await renderDemoSource("groove", ctx.sampleRate);
const source = ctx.createBufferSource();
source.buffer = buffer;
source.loop = true;
source.connect(output);
source.start();
```

A device chooses its own sound. `useDeviceLoop` plays one through an engine, gives back its tempo for a time parameter that syncs to it, and a session lets a preview's bar change the sound:

```tsx
import { useDemoSource } from "@/hooks/use-demo-source";
import { useDeviceLoop } from "@/hooks/use-device-loop";

// A de-esser plays the groove by default; a gate plays the chord and is keyed by the kick that goes with it.
useDeviceLoop({ create, destination, source: "groove", state });
```

`useDemoSource("groove")` returns the sound chosen in the nearest `AudioSessionProvider`, or `"groove"` when nobody has chosen. Outside a session it is always the default.