Examples
Default
Negative
Small
With File Name
Player
Props
VoiceNote
A voice-note audio player: a play/pause control, an amplitude waveform, and a timestamp — for voice messages and audio attachments in a conversation. Two modes: passsrc for a self-contained player that decodes the waveform, plays real audio, tracks live progress and is seekable; or omit src and drive it with playing/progress + onPlayPause for a presentational, fully-controlled voice note. flat renders a compact dotted preview and negative adapts it to dark message bubbles.
string
default:"Voice note"
Accessible name for the whole player.
boolean
default:"false"
Initial playing state (uncontrolled).
number
Fallback total duration (seconds), used until the media’s metadata loads.
string
File name shown when the audio is an uploaded file rather than a voice note.
boolean
default:"false"
Dark-surface treatment for use on message bubbles.
(() => void)
Called when audio playback reaches the end (only in
src mode).((playing: boolean) => void)
Called with the next playing state when the play/pause control is pressed.
(() => void)
Called when the remove button is pressed.
string
Accessible name for the play/pause control. Defaults to “Play”/“Pause”.
boolean
Whether audio is playing (controlled) — toggles the play/pause icon.
number
Playback progress (0–1) for the presentational mode. When set, the waveform splits into played/unplayed bars (the “Listening” state). Ignored when
src is set (progress comes from the media element).string
default:"Remove"
Accessible name for the remove button.
boolean
default:"true"
Show the play/pause control.
boolean
default:"false"
Show a remove button (calls
VoiceNoteProps.onRemove).boolean
default:"true"
Show the timestamp label.
"small" | "default"
default:"default"
Size preset.
string
URL of the audio to play. When set, the component manages a real
<audio> element: it decodes the waveform, plays/pauses, tracks live progress and is seekable — waveform/progress are derived automatically. Leave unset for a presentational, fully-controlled voice note.string
Timestamp or duration label, e.g. “0:05”. Ignored when
src is set (derived from the media)."flat" | "default"
default:"default"
Visual style;
flat renders a simplified dotted preview.number[]
Amplitude values (0–1), one per bar. Ignored when
src is set. Falls back to a built-in pattern.Exported types
Also exported from@fanvue/ui: VoiceNoteProps, VoiceNoteSize, VoiceNoteVariant.
Setup: Installation · Theming