Audio Visualizer
betaWhat a microphone is hearing, drawn live — bars, a wave or a breathing orb — from a MediaStream or a level your own pipeline supplies.
- AI
- 1 file
- 1 npm package
- Accessibility notes
- Draws on a canvas
pnpm dlx @dowel-ui/cli add audio-visualizernpm packages installed: class-variance-authority.
import { AudioVisualizer } from "@/components/ui/audio-visualizer";Default
Simulated
<AudioVisualizer>
| Prop | Type | Default |
|---|---|---|
bandsBars, or points along the wave. Default 24. | number | 24 |
colorColour: a token or any CSS colour. Default "primary". | string | "primary" |
labelNames it for screen readers; without one it is decoration. | string | — |
levelA level from elsewhere, 0–1, when there is no stream. | number | — |
streamA live audio stream to listen to — usually from getUserMedia. | MediaStream | null | — |
variant | "bars" | "wave" | "orb" | "bars" |
Plus every attribute of <div> except color.
Decoration by default (aria-hidden); give it a `label` and it becomes a named image. It shows whether input is being picked up, so — like a loader — it keeps updating under reduced motion while live, without easing; with no input it rests. Never make it the only sign that recording is on: say so in text too, as voice-input does.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes