Live Waveform
A canvas waveform of a live signal, as scrolling history or the current frame.
Installation
$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/live-waveform.json$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/live-waveform.json$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/live-waveform.json$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/live-waveform.jsonUsage
<script lang="ts">
import { LiveWaveform } from "#lib/components/ui/live-waveform/index.js";
</script>
<LiveWaveform mode="scrolling" source={analyser.visual} class="h-16" />The waveform fills its container, so size it with classes. It redraws on resize and picks up theme changes on its own.
Scrolling moves between history samples without adding samples. The source's historyIntervalMs option sets the minimum wait, 50 ms by default. The source takes the next sample on the first frame after that wait. With 16 ms frames, samples arrive every 64 ms, and a bar moves one step over those 64 ms.
The drawing uses a short buffer so it can follow measured sample times without guessing when the next sample will arrive. This adds twice the configured history interval as display delay, 100 ms by default. If the browser pauses or throttles frames, the built-in sources skip missed samples rather than repeat stale levels. If you use a custom source, add the history timing fields to enable smooth scrolling.
When the source stops sending frames, the waveform finishes its buffered scroll and stops requesting animation frames. A new source frame wakes it again.
Examples
Variants
Idle
With active={false} the waveform shows a dotted line.
Microphone
Theming
| Variable or attribute | Meaning |
|---|---|
--waveform | Drawing color, default currentColor |
data-mode, data-variant | Current settings |
data-active | Drawing the signal rather than the idle line |
Accessibility
The root has role="img". Give it an aria-label, or aria-hidden when a labelled meter is next to it. With reduced motion it redraws four times a second.
API reference
| Prop | Type | Default |
|---|---|---|
source | FrameSource<VisualFrame> | null | — |
mode scrolling shows level history; static shows the current frame. | "scrolling" | "static" | "static" |
variant line draws the waveform trace in static mode. | "bars" | "line" | "mirror" | "bars" |
barWidth Pixels. | number | 3 |
barGap Pixels. | number | 1 |
barRadius Pixels. | number | 1.5 |
minBarHeight Pixels. | number | 4 |
lineWidth For the line variant. | number | 1.5 |
fadeEdges Fade the left and right edges. | boolean | true |
fadeWidth Pixels. | number | 24 |
active false shows an idle dotted line. | boolean | true |
sensitivity Visual gain. | number | 1 |
Exported functions
Bind the component with bind:this to call them. Their type is LiveWaveformActions.
| Prop | Type | Default |
|---|---|---|
paint Paint a frame directly. | (frame: VisualFrame) => void | — |
clear Clear the canvas and forget the last frame. | () => void | — |