# Audio player

> Compact audio player with a clickable waveform, skip and playback speed.

Component · Pro · https://lodeui.com/components/audio-player

## When to use

- Podcasts, voice notes, previews and sound libraries.

## When not to use

- Background music: avoid autoplaying audio.

## Installation

```bash
npx shadcn@latest add @lode/audio-player
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AudioPlayer } from "@/components/ui/audio-player";

<AudioPlayer title="Episode 12" artist="Design Notes" src="/audio/ep12.mp3" />
```

## API reference

### AudioPlayer

An <audio> with a waveform scrubber, skip buttons and speed.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| src / title / artist | `string` | – | Track details. |
| cover | `string` | – | Cover image URL. |
| waveform | `number[]` | – | Bar heights 0–1; generated from the title when omitted. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Play or pause (on the cover) |
| ← / → | Seek (on the waveform) |
| Tab | Reach skip and speed |

## Accessibility

- Play, seek, skip and speed are all labelled; the waveform is a native range input.

## Motion

- Bars stand taller while playing and fill with progress.

## Responsive behavior

- Up to 448px wide.

## Performance

- preload="metadata".

## Notes for AI

- Generate real waveform data on the server for accuracy.

## Related

- [Video player](https://lodeui.com/components/video-player) — Video with custom auto-hiding controls, scrubbing, captions, fullscreen and shortcuts.
- [Voice orb](https://lodeui.com/components/voice-orb) — A living orb for voice assistants: idle, listening, thinking and speaking states.