Spectrum

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @audiocn/spectrum

UsageCopy Anchor Link

import { Spectrum } from "@/components/ui/spectrum";

const analyser = useAudioAnalyser(stream, { bands: 64 });

<Spectrum source={analyser.visual} />;

The spectrum draws the frequency bands of a visual frame. Set minHz, maxHz, minDb and maxDb to match the analyser that produced them, so the axes are labelled correctly. The defaults match useAudioAnalyser.

AnatomyCopy Anchor Link

<Spectrum>
  <SpectrumLevelAxis />
  <SpectrumCanvas />
  <SpectrumFrequencyAxis />
</Spectrum>

ExamplesCopy Anchor Link

Line and areaCopy Anchor Link

MicrophoneCopy Anchor Link

ThemingCopy Anchor Link

API referenceCopy Anchor Link