audiocnLive Waveform
A canvas waveform of a live signal, as scrolling history or the current frame.
Installation
$ pnpm dlx shadcn@latest add @audiocn/live-waveformUsage
import { LiveWaveform } from "@/components/ui/live-waveform";<LiveWaveform mode="scrolling" source={analyser.visual} className="h-16" />The waveform fills its container, so size it with classes. It redraws on resize and picks up theme changes on its own.
Examples
Variants
static bars
static mirror
static line
scrolling line
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