Audio playerPro
Compact audio player with a clickable waveform, skip and playback speed.
T-Rex roar · Sound effects
0:00 / 0:00Sample audio: CC0, from MDN.
When to use
- Podcasts, voice notes, previews and sound libraries.
When not to use
- Background music: avoid autoplaying audio.
Installation
Usage
Import it from @/components/ui/audio-player after installing.
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 |
|---|---|
| EnterorSpace | Play or pause (on the cover) |
| ←or→ | 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.
This page as Markdown, for assistants and coding agents:
/components/audio-player/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt