## Voice Note (S—147)

A chat voice-message bubble: play / pause, a waveform that fills as it plays and can be scrubbed, plus 1× / 1.5× / 2×.

- URL: https://sundaeui.dev/components/voice-note
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/voice-note.json`
- Tags: chat, player, voice-note, audio, scrub, waveform

The waveform doubles as the progress bar: played bars turn solid, and dragging across it seeks. The timer counts down the remaining time.
A speed chip cycles 1×, 1.5× and 2×. The demo simulates playback; pass a real audio element’s time to drive it.

### Usage

```tsx
import { VoiceNote } from '@/components/sundae/voice-note'

<VoiceNote />
```

### Props

- `duration` (`number`, required): Length in seconds.
- `peaks` (`number[]`, required): Waveform heights 0–1.
- `onSeek` (`(s: number) => void`): Called when scrubbing.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Chat apps, support threads, async standups.

### When not to use

- Music or long-form audio: use a full player.

### Accessibility

- Play is a toggle button; the waveform is a slider with the time as aria-valuetext.
- Arrow keys seek 5 seconds.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Space: Play / pause
- ← / →: Seek 5s