pnpm dlx shadcn@latest add @audio-ui/demo-sound
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.
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:
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.