Usage
This demo uses your device's microphone.
Features
- Visualize an agent's audio track
- Customize the color, line width and smoothing of the wave
- Select from five sizes:
icon,sm,md,lg, andxl - Responds to agent state with unique animations
Installation
pnpm dlx shadcn@latest add @agents-ui/agent-audio-visualizer-wave
Props
| Prop name | Type | Default |
|---|---|---|
size? | enum | lg |
state? | enum | speaking |
color? | `#${string}` | – |
colorShift? | number | 0.05 |
lineWidth? | number | – |
blur? | number | – |
audioTrack? | LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder | – |
volume? | number | – |
className? | string | – |
ref? | Ref<HTMLDivElement> | – |
...props? | ComponentProps<'div'> | |