Voice Message Bubble Chat
Voice message bubble with animated waveform visualization, play/pause controls, and time display. Features smooth waveform animation during playback.
✦Login free · unlock code · 200+ premium components with Pro
Refresh preview
Share Component
Copy CLI command
Props
| Property | Type | Default | Description |
|---|---|---|---|
| isPlaying | boolean | undefined | Whether the voice message is currently playing. |
| onPlayToggle | (playing: boolean) => void | undefined | Callback function called when play/pause is toggled. |
| currentTime | number | 12 | Current playback time in seconds. |
| duration | number | 105 | Total duration of the voice message in seconds. |
| avatarUrl | string | "https://api.dicebear.com/7.x/avataaars/svg?seed=Jack" | URL of the avatar image. |
| waveformColor | string | "#f97316" | Color of the waveform visualization (hex, rgb, or hsl). |
| bgColor | string | "white" | Background color of the bubble. |
| className | string | undefined | Additional CSS classes for custom styling. |
Related Components
Enjoying Uilora? Unlock the full library.
56+ premium components, unlimited CLI, unlimited MCP, v0 + Claude prompts — one payment, forever.
✓ Instant access✓ Lifetime updates✓ Commercial license
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.