Voice Message Bubble Chat
Voice message bubble with animated waveform visualization, play/pause controls, and time display. Features smooth waveform animation during playback.
Main Features of Voice Message Bubble Chat
How to Use Voice Message Bubble Chat in Next.js
Installation Guide for Voice Message Bubble Chat
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. |