pnpm dlx shadcn@latest add @audio-ui/use-audio-levels
import { useAudioLevels } from "@/hooks/use-audio-levels";| Files | hooks/use-audio-levels.ts |
|---|---|
| Depends on | Nothing |
| npm | @audio-ui/react, @audio-ui/engine |
| Used by | block-audio-editor, block-timeline, mixer-view, needle-meter-demo, track-level |
| Export | Kind | What it is |
|---|---|---|
useAudioLevels | function | The live levels of a signal, one channel per analyser, in the shape a Meter paints from: the RMS in dB, how loud it sounds, falling back smoothly, and the peak, its loudest sample, which holds and then falls, so the mark shows how near it comes to clipping. |
Usage
import { useAudioLevels } from "@/hooks/use-audio-levels";
// One analyser per channel, made once: a new array restarts the sampling.
const analysers = useMemo(() => {
const analyser = ctx.createAnalyser();
output.connect(analyser);
return [analyser];
}, [ctx, output]);
const levels = useAudioLevels(analysers);
<Meter aria-label="Output" source={levels} />;useAudioLevels(analysers) gives { levels, peaks }, one entry per analyser, in dB: the RMS level, how loud the signal sounds, which falls back smoothly as a needle would, and the peak, its loudest sample, which holds, then falls, so a meter's mark shows how near the signal comes to clipping. rmsDb and peakDb from @audio-ui/engine/analysis are the two readings. A ChannelSplitterNode splits a stereo signal into one analyser per side. While the signal is silent, nothing is published. A Meter paints it, and the Mixer gives one to each channel.