pnpm dlx shadcn@latest add @audio-ui/use-device-signal
import { useDeviceSignal } from "@/hooks/use-device-signal";| Files | hooks/use-device-signal.ts |
|---|---|
| Depends on | device-signal |
| 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 |
| Export | Kind | What it is |
|---|---|---|
useDeviceSignal | function | The live signal of a device's engine, for its panel's signal: what goes in and comes out, and what the device declares in signals. |
Usage
import { compressorDevice } from "@/components/audio-ui/devices/compressor/device";
import { createCompressorEngine } from "@/components/audio-ui/devices/compressor/engine";
import { CompressorPanel } from "@/components/audio-ui/devices/compressor/panel";
import { useDeviceEngines } from "@/hooks/use-device-engines";
import { useDeviceSignal } from "@/hooks/use-device-signal";
const [engine = null] = useDeviceEngines({
create: createCompressorEngine,
destination,
state,
});
const signal = useDeviceSignal(engine, compressorDevice);
<CompressorPanel onValueChange={setState} signal={signal} value={state} />;useDeviceSignal(engine, device) returns the device signal of engine: the same object for the life of the component, following engine as it changes and silent while it is null, such as before the sound starts. It listens only while the panel watches one of its sources, and needs no cleanup: unmounting the panel takes its analysers off.