audiocnuseAudioAnalyser
Meter and visual frame sources from a MediaStream, media element or AudioNode.
useAudioAnalyser connects any audio to audiocn's meters and visualizers. It measures peak and RMS per channel and reduces the spectrum to frequency bands, and only runs while a component is subscribed.
$ pnpm dlx shadcn@latest add @audiocn/use-audio-analyserUsage
const microphone = useMicrophone({ enabled: true });
const analyser = useAudioAnalyser(microphone.stream, { channels: "stereo" });
return (
<>
<LevelMeter aria-label="Microphone" source={analyser.meter} />
<BarVisualizer aria-hidden source={analyser.visual} />
</>
);Media elements
A media element can only be connected to Web Audio once. The hook remembers the connection, routes the element to the speakers through the context, and reuses it for every analyser.
Options
Prop
Type
Returns
Prop
Type
Frames are reused between updates to avoid allocating. Copy a frame if you need to keep it.