The Voice Message Bubble component is a sleek, chat-style audio player designed for messaging apps. It features a compact bubble layout with a play/pause button using lucide-react icons, a minimalist black-and-white waveform visualization, and a real-time progress overlay. Users can click on the waveform to seek through the audio, and the component accepts configurable props for bubble color, waveform color, audio source, and duration. Designed with Shadcn UI principles, it ensures a clean, modern, and theme-aware interface that integrates seamlessly into both light and dark layouts. This makes it ideal for voice notes, notifications, or short audio messages in any chat or social application.
"use client"
import * as React from "react"
import VoiceMessageBubble from "@/components/ui/voice-message-bubble"
export default function DemoVoiceMessageBubble() {
return (
<div className="flex flex-col gap-4 p-6 max-w-md mx-auto">
<h2 className="text-2xl font-semibold mb-4 text-center text-black dark:text-white">
Voice Message Bubble Demo
</h2>
<VoiceMessageBubble
audioSrc="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
duration={15}
bubbleColor="#fff"
waveColor="#000"
/>
<VoiceMessageBubble
audioSrc="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
duration={10}
bubbleColor="#000"
waveColor="#fff"
/>
<VoiceMessageBubble
audioSrc="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"
duration={20}
bubbleColor="#fff"
waveColor="#000"
/>
<VoiceMessageBubble
audioSrc="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3"
duration={12}
bubbleColor="#000"
waveColor="#fff"
/>
</div>
)
}
Part of Ruixen UI — browse the full library on 21st.dev.