pnpm dlx shadcn@latest add @audio-ui/use-audio-signal
import { useAudioSignal } from "@/hooks/use-audio-signal";| Files | hooks/use-audio-signal.ts |
|---|---|
| Depends on | Nothing |
| npm | @audio-ui/engine |
| Used by | Nothing |
| Export | Kind | What it is |
|---|---|---|
AudioSignalSource | interface | A live signal of levels, 0-1 each, in the shape of an external store. |
AudioSignal | interface | |
UseAudioSignalOptions | interface | |
useAudioSignal | function | Reads an AnalyserNode every animation frame (paused automatically while the tab is in the background) into three live signals: level, the loudest sample of the moment; bands, the spectrum as log-spaced frequency bands; and samples, the raw waveform. |
Usage
An AnalyserNode as three live signals for a live waveform: level, the loudest sample of the moment, for a waveform that scrolls; bands, the spectrum as log-spaced bands, for bars that dance; and samples, the raw waveform, for a scope. Each is read only while something is subscribed to it.
import { LiveWaveform } from "@/components/audio-ui/waveform";
import { useAudioSignal } from "@/hooks/use-audio-signal";
const signal = useAudioSignal(analyser, { bandCount: 32 });
<LiveWaveform source={signal.level} />;
<LiveWaveform shape="scope" source={signal.samples} />;It returns stable sources, so sampling never re-renders the component that calls it; without an analyser they fall silent. See Waveform.