Spectrum Analyzer

Shows what a sound is made of: the fundamental and harmonics of a note, the low end of a mix, what an equalizer changes. It is drawn on a Plot, so it shares its axes, grid and pointer readout, and follows the audio frame by frame without re-rendering React.

Installation

bunnpmpnpmyarn
Copy
pnpm dlx shadcn@latest add @audio-ui/spectrum-analyzer

Anatomy

The analyzer is a Plot: a log frequency axis, a filled trace for the spectrum, and a second trace for the peaks.

Copy
import { Plot } from "@audio-ui/react";

<Plot.Root scaleX="log">
  <Plot.Grid />
  <Plot.Graph>
    <Plot.Trace /> {/* the spectrum, filled */}
    <Plot.Trace /> {/* the spectrum's line */}
    <Plot.Trace /> {/* the held peaks */}
  </Plot.Graph>
  <Plot.Cursor />
</Plot.Root>

Usage

Tap an AnalyserNode anywhere in your graph and turn it into a spectrum with the use-spectrum hook:

Copy
import { SpectrumAnalyzer } from "@/components/audio-ui/spectrum-analyzer";
import { useSpectrum } from "@/hooks/use-spectrum";

const analyser = ctx.createAnalyser();
analyser.fftSize = 8192; // finer low end
output.connect(analyser);

const spectrum = useSpectrum(analyser);

<SpectrumAnalyzer aria-label="Spectrum" source={spectrum} />;

Give the analyzer the same minHz and maxHz as the hook, so each point lands on its frequency. A larger fftSize separates low notes better, and smoothingTimeConstant sets how fast the spectrum settles.

The peaks come from useSpectrumPeaks(spectrum, { hold, fall }) in the same hook file: each point keeps its loudest level for hold seconds (default 1), then falls at fall dB per second (default 24). Both hooks are in Analysis.

API reference

Other props go to the Plot root, such as className for its height.