Audio visualizer
Agent audio in five monochrome forms: bars, radial, grid, line and dots, with connecting and thinking motion when there is no sound.
On this page
Bars, radial, grid, line and dots driven by one simulated voice, or your microphone.
Installation
Usage
import { AudioVisualizer } from "@/components/ui/chatcn/audio-visualizer"
const output = useChatcnAudioLevel(remoteAudioElement, { updateRate: 0 })
<AudioVisualizer variant="bars" state={state} bands={output.getBands} />Give it bands from useChatcnAudioLevel for a real spectrum, or only a level and it synthesizes a speech-shaped one. The lowest band sits in the middle and higher bands spread outward, so a voice swells from the centre instead of leaning to one side like a music equalizer.
Examples
States
Audio drives listening and speaking. Without it, motion alone says what is happening: a soft highlight sweeps across while connecting, a slow wave breathes out from the centre while thinking, and idle rests on faint dots.
Idle, connecting, listening, thinking and speaking in the bars variant.
Variants
| Variant | Form | Default count |
|---|---|---|
bars | Rounded pills that stretch from the centre line | 7 |
radial | Spokes around an open centre; the sweep goes around | 48 |
grid | A cell matrix lit up and down from the middle row | 16 columns |
line | A tapered mirrored curve | 40 |
dots | A row of dots that grow with energy | 9 |
Props
| Prop | Type | Notes |
|---|---|---|
variant | AudioVisualizerVariant | Default bars |
state | "idle" | "connecting" | "listening" | "thinking" | "speaking" | Default speaking |
level | number | () => number | Bands are synthesized from it when bands is absent |
bands | ArrayLike<number> | (count) => ArrayLike<number> | Lowest frequency first |
count | number | Bars, spokes, columns or dots |
reducedMotion | boolean | Force reduced motion on or off |
label | string | Accessible name. Defaults to Audio and the state |
Keyboard
None. It is a picture of sound with no actions of its own.
Accessibility
- It is an image named after the state (Audio: speaking), so the state is never carried by motion alone.
- Quiet parts recede to faint ink and energy rises to full ink: one color, no glow, readable in light, dark and forced colors.
- Size comes from
className, so it scales with the layout and 200% zoom.
Motion
- Each value rises fast and falls slower, so syllables land crisply and decay naturally instead of flickering.
- Under reduced motion each state is a still form: a single lit centre while connecting, a low even hump while thinking, a modest hump for listening and a taller one for speaking.
- The loop sleeps once idle settles, and whenever the visualizer is off screen or the tab is hidden.