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.
pnpm dlx shadcn@latest add @audio-ui/use-device-loop
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 is on, so the play button belongs to the host, and it is silent outside one.
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 outThe engine is made when the loop starts and disposed when it stops (useDeviceEngines), 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).
Returns · 3