Voice Message Bubble

Voice Message Bubble Demo

15s

10s

20s

12s

Installation

Usage

import VoiceMessageBubble from "@/components/ruixen/voice-message-bubble";
 
export default function App() {
  return (
    <VoiceMessageBubble
      audioSrc="https://example.com/voice-message.mp3"
      duration={45}
      bubbleColor="#e3f2fd"
      waveColor="#1976d2"
    />
  );
}

Props

Prop	Type	Default	Description
`audioSrc`	`string`	-	URL of the voice message
`duration`	`number`	-	Duration in seconds
`bubbleColor`	`string`	`"#fff"`	Background color of bubble
`waveColor`	`string`	`"#000"`	Color of waveform bars
`className`	`string`	-	Additional CSS classes

Features

Chat Bubble Design: Familiar messaging app appearance
Waveform Visualization: Animated waveform bars
Click to Seek: Click on waveform to jump to position
Play/Pause Control: Simple audio controls
Progress Overlay: Visual progress indication
Duration Display: Shows message length
Customizable Colors: Configurable bubble and wave colors

Styling

The component supports custom colors for both the bubble background and waveform:

<VoiceMessageBubble
  audioSrc="/voice.mp3"
  duration={30}
  bubbleColor="#dcf8c6" // WhatsApp green
  waveColor="#075e54" // Dark green
/>