pnpm dlx shadcn@latest add @audio-ui/use-spectrum
import { useSpectrum, useSpectrumPeaks } from "@/hooks/use-spectrum";| Files | hooks/use-spectrum.ts |
|---|---|
| Depends on | Nothing |
| npm | @audio-ui/react, @audio-ui/engine |
| Used by | block-channel-eq, block-deesser, block-equalizer, block-filter, block-multiband, block-overdrive, plot-demo, spectrum-analyzer, spectrum-analyzer-demo |
| Export | Kind | What it is |
|---|---|---|
UseSpectrumOptions | interface | |
useSpectrum | function | The spectrum of an AnalyserNode as a live source for a plot's Plot.Trace: dB per point along a logarithmic frequency axis, refreshed every frame while the analyser is there, with no React render per frame. |
useSpectrumPeaks | function | The peaks of a spectrum source, as a live source of their own: each point keeps the loudest level it reached for hold seconds, then falls at fall dB per second. |
Usage
import { useSpectrum, useSpectrumPeaks } from "@/hooks/use-spectrum";
const analyser = ctx.createAnalyser();
analyser.fftSize = 8192; // finer low end
output.connect(analyser);
const spectrum = useSpectrum(analyser, { minHz: 20, maxHz: 20000 });
const peaks = useSpectrumPeaks(spectrum, { hold: 1, fall: 24 });
<SpectrumAnalyzer aria-label="Spectrum" peaks={peaks} source={spectrum} />;useSpectrum gives dB per point along a logarithmic frequency axis, 160 points from 20 Hz to 20 kHz unless told otherwise. Draw it with the Spectrum analyzer, or as a trace on a Plot behind an equalizer's curve. useSpectrumPeaks keeps each point's loudest level for hold seconds, then lets it fall at fall dB per second.