Voice messagePro
A voice note bubble whose waveform is the seek bar, with speed, an unplayed dot and a transcript that opens underneath.
On this page
Installation
Usage
import { VoiceMessage } from "@/components/ui/chatcn/pro/voice-message"
<VoiceMessage src={url} duration={14} peaks={peaks} transcript={transcript} unplayed />The waveform is resampled to its width and drawn twice: faint underneath, ink on top clipped to the playhead, so the played part splits exactly where it is, through a bar if need be. Drag or use the arrow keys to seek; while you scrub the time follows your finger before the audio catches up. The time shows the length until you play, then the position. Speed cycles 1, 1.5 and 2×. Without src the component plays a clock for duration, which is what previews and tests use; pass audio from useMessageAudio to share one clock with a mini player. variant="flat" drops the fill for the other side of a chat.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
src | string | Audio file. Optional |
duration | number | Seconds |
peaks | number[] | Loudness samples, any length and scale |
transcript, transcriptStatus | string, "idle" | "transcribing" | "done" | "error" | |
transcriptOpen, defaultTranscriptOpen, onTranscriptOpenChange | boolean | |
unplayed, onPlayed | boolean, () => void | The accent dot until played |
audio | MessageAudio | A shared clock |
variant | "bubble" | "flat" | Default bubble |
disabled | boolean | |
labels | Partial<VoiceMessageLabels> | Every string, for translation |
Keyboard
| Key | Action |
|---|---|
| Space or Enter on play | Play or pause |
| Left and Right on the waveform | Back or forward 5 s |
| Page Up and Page Down | 15 s |
| Home and End | Start and end |
Accessibility
- The waveform is a slider with the position read as
9 seconds of 22 seconds. - Play and speed buttons are named; the unplayed dot has a text alternative.
- A file that fails to load says so in an alert; play is disabled.
Motion
Play and pause swap in 150 ms with a 2 px blur. The played part follows the playhead every frame while playing and eases for 150 ms on clicks and keys. The transcript opens in 200 ms on grid rows. Reduced motion keeps fades only.