Navigation & Structure
Voice Message Bubble Chat
Voice message bubble with animated waveform visualization, play/pause controls, and time display. Features smooth waveform animation during playback.
navigation-structurechatvoiceaudiowaveformmessagebubble
Props
Customize the component with these 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. |