> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# 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.
```tsx theme={null}
import { VoiceNote } from "@fanvue/ui";
import type { VoiceNoteProps, VoiceNoteSize, VoiceNoteVariant } from "@fanvue/ui";
```
## Examples
## Default
```tsx theme={null}
import { VoiceNote } from "@fanvue/ui";
```
## Negative
```tsx theme={null}
import { VoiceNote } from "@fanvue/ui";
```
## Small
```tsx theme={null}
import { VoiceNote } from "@fanvue/ui";
```
## With File Name
```tsx theme={null}
import { VoiceNote } from "@fanvue/ui";
```
## Player
```tsx theme={null}
import { VoiceNote } from "@fanvue/ui";
```
## 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: pass `src` 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.
Accessible name for the whole player.
Initial playing state (uncontrolled).
Fallback total duration (seconds), used until the media's metadata loads.
File name shown when the audio is an uploaded file rather than a voice note.
Dark-surface treatment for use on message bubbles.
Called when audio playback reaches the end (only in `src` mode).
Called with the next playing state when the play/pause control is pressed.
Called when the remove button is pressed.
Accessible name for the play/pause control. Defaults to "Play"/"Pause".
Whether audio is playing (controlled) — toggles the play/pause icon.
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).
Accessible name for the remove button.
Show the play/pause control.
Show a remove button (calls `VoiceNoteProps.onRemove`).
Show the timestamp label.
Size preset.
URL of the audio to play. When set, the component manages a real `
Timestamp or duration label, e.g. "0:05". Ignored when `src` is set (derived from the media).
Visual style; `flat` renders a simplified dotted preview.
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](/docs/ui/installation) · [Theming](/docs/ui/theming)