Components
Time and sequencing
Blocks
The level of a sound across frequencies, live, on a log axis in hertz, with held peaks.
Audio UI
"use client";
import type { Piano as PianoPrimitive } from "@audio-ui/react";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.
The analyzer is a Plot: a log frequency axis, a filled trace for the spectrum, and a second trace for the peaks.
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>Tap an AnalyserNode anywhere in your graph and turn it into a spectrum with the use-spectrum hook:
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).
Props · 8
useSpectrum returns.source: your own useSpectrumPeaks with another hold or fall, or peaks you compute yourself.Other props go to the Plot root, such as className for its height.