Spectrum
A frequency spectrum analyser with axes, a grid and peak hold.
Installation
$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/spectrum.json$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/spectrum.json$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/spectrum.json$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/spectrum.jsonUsage
<script lang="ts">
import { Spectrum } from "#lib/components/ui/spectrum/index.js";
import { useAudioAnalyser } from "#lib/hooks/use-audio-analyser.svelte.js";
let { stream }: { stream: MediaStream | null } = $props();
const analyser = useAudioAnalyser(() => stream, { bands: 64 });
</script>
<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.
Anatomy
<Spectrum>
<SpectrumLevelAxis />
<SpectrumCanvas />
<SpectrumFrequencyAxis />
</Spectrum>Examples
Line and area
Microphone
Theming
| Variable | Default |
|---|---|
--spectrum | primary |
--spectrum-peak | foreground |
--spectrum-grid | border |
API reference
| Prop | Type | Default |
|---|---|---|
source | FrameSource<VisualFrame> | null | — |
variant | "bars" | "line" | "area" | "bars" |
minDb / maxDb The level range the bands cover. | number | -100 / -30 |
minHz / maxHz The frequency range the bands cover. | number | 40 / 16000 |
scale Frequency axis law. | "log" | "linear" | "log" |
peakHold Falling peak markers. | boolean | false |
grid | boolean | true |