Getting Started
Templates
Components
A compact audio playback button that expands to reveal an animated frequency visualizer and elapsed time counter. Features smooth layout animations and supports custom audio sources.
Key Features:
import { VoiceRecorderButton } from "@/components/ui/voice-recorder-button"
export default function Example() {
return (
<VoiceRecorderButton
audioSrc="/audio/voice-message.mp3"
bars={16}
onStart={() => console.log("Playback started")}
onStop={() => console.log("Playback stopped")}
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
audioSrc | string | undefined | URL of audio file to play |
bars | number | 12 | Number of frequency bars to display |
onStart | () => void | undefined | Callback when playback starts |
onStop | () => void | undefined | Callback when playback stops |
className | string | undefined | Additional CSS classes |
The button has two visual states:
The frequency bars create a dynamic waveform effect:
The component manages audio playback internally:
audioSrc is providedAdjust the frequency bar colors by overriding the primary color:
<VoiceRecorderButton
audioSrc="/audio.mp3"
className="[&_.bg-primary]:bg-green-500"
/>