Spectrum
spectrumVisualizersFFT magnitude, as bars or a filled curve.
$ pnpm dlx shadcn@latest add @pluginui/core-spectrumLoading interactive preview…
Install
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
use-audio-sourcecontrol-theme
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-spectrum.jsonUsage
Connect the documented props to your application or host.
import { Spectrum } from "@/components/ui/spectrum"
<Spectrum analyser={analyserNode} variant="bars" bars={48} />About Spectrum
Plots magnitude against frequency on a logarithmic axis. A linear axis would spend half its width above 10 kHz, where little musically interesting happens, while compressing the bass into a few pixels. Each bar takes the loudest bin in its band, so a narrow peak is never averaged into invisibility.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| analyser | AnalyserNode | — | A live analyser to read frequency data from. |
| getData | (target: Float32Array) => boolean | void | — | Supply dB magnitudes yourself instead of using an analyser. |
| variant | "bars" | "curve" | "bars" | Discrete bars, or a filled line across the bins. |
| bars | number | 48 | Number of bars. Ignored by the curve variant. |
| scale | "log" | "linear" | "log" | Frequency axis scaling. Log is the musically useful one. |
| minFrequency / maxFrequency | number | 20 / Nyquist | The frequency range shown. |
| minDecibels / maxDecibels | number | -90 / -10 | The magnitude range mapped to the display height. |
| sampleRate | number | — | Needed for the frequency axis when driving from getData. |
| height | number | 140 | Display height in pixels; width defaults to 100%. |
Interaction
- Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
- Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
- Double-click resets to
defaultValue. - Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
- Proper
sliderandswitchroles with livearia-valuetext, so a screen reader announces the formatted value rather than the raw number. - The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.