# Audio Message

Voice-note bubble with a waveform that lights up as it plays. Has a timer, speed chip, scrub to seek, an unplayed dot and an optional word-by-word transcript; your app plays the sound.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/audio-message
```

## Import

```tsx
import { AudioMessage } from "@/components/ui/audio-message/audio-message";
```

## Variants

- `compact` — Compact in thread: `npx @lumioui/cli add pro/audio-message-compact`
- `received` — Received bubble: `npx @lumioui/cli add pro/audio-message-received`
- `sent` — Sent bubble: `npx @lumioui/cli add pro/audio-message-sent`
- `transcript` — Transcript under: `npx @lumioui/cli add pro/audio-message-transcript`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `duration` | `number` | Length in seconds. |
| `samples?` | `number[]` | Amplitudes 0–1, one per bar. Omit to derive a stable shape from `seed`. |
| `seed?` | `number` | Seed for the generated waveform shape. Default derives from duration. |
| `bars?` | `number` | Bar count when generating. Default 30 (md) / 22 (compact). |
| `variant?` | `"sent" | "received"` | sent — accent bubble on the right; received — neutral bubble on the left. |
| `size?` | `"md" | "compact"` | md — full bubble with speed chip and time; compact — one-line pill for dense threads and reply quotes. |
| `playing?` | `boolean` | — |
| `defaultPlaying?` | `boolean` | — |
| `onPlayingChange?` | `(playing: boolean) => void` | — |
| `speed?` | `AudioMessageSpeed` | — |
| `defaultSpeed?` | `AudioMessageSpeed` | — |
| `onSpeedChange?` | `(speed: AudioMessageSpeed) => void` | — |
| `onSeek?` | `(seconds: number) => void` | Fires with the new position in seconds after a scrub. |
| `onEnd?` | `() => void` | Fires when playback reaches the end. |
| `listened?` | `boolean` | Received notes: false shows the unplayed dot until first play. Default true. |
| `time?` | `string` | Timestamp in the bubble's corner ("9:41"). |
| `transcript?` | `string` | Text transcript that folds open under the bubble. |
| `defaultTranscriptOpen?` | `boolean` | — |
| `senderName?` | `string` | Who sent it, for the screen-reader label. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/audio-message