audiocnAudio Player
A composable audio player with transport, seeking, time, volume, rate, loop and keyboard shortcuts.
Loading…
0:00−0:00
Installation
$ pnpm dlx shadcn@latest add @audiocn/audio-playerUsage
import {
AudioPlayer,
AudioPlayerPlay,
AudioPlayerSeek,
} from "@/components/ui/audio-player";<AudioPlayer src="/episode.mp3">
<AudioPlayerPlay />
<AudioPlayerSeek />
</AudioPlayer>Every part is optional. A play button and a seek bar is a complete player. Buttons show a text label unless you pass an icon as children, so the component works with any icon set.
Anatomy
<AudioPlayer>
<AudioPlayerArtwork />
<AudioPlayerTitle />
<AudioPlayerDescription />
<AudioPlayerControls>
<AudioPlayerPrevious />
<AudioPlayerSkipBack />
<AudioPlayerPlay />
<AudioPlayerSkipForward />
<AudioPlayerNext />
</AudioPlayerControls>
<AudioPlayerTime />
<AudioPlayerSeek />
<AudioPlayerTime type="remaining" />
<AudioPlayerVolume />
<AudioPlayerRate />
<AudioPlayerLoop />
</AudioPlayer>Examples
Compact
With a waveform and a playlist
The Music Player block uses a Waveform as the seek bar and a Track List for the queue.
Your own player state
Create the player with useAudioPlayer and pass it in, to reach it from outside, route it into a mixer or analyse it.
const player = useAudioPlayer({ src });
const analyser = useAudioAnalyser(player.element);
<AudioPlayer player={player}>…</AudioPlayer>;useAudioPlayerContext() reads the player from inside any part.
Keyboard
While focus is inside the player:
| Key | Action |
|---|---|
| Space or K | Play or pause |
| Left / Right | Seek 5 s |
| Shift + Left / Right | Seek 15 s |
| Up / Down | Volume |
| M | Mute |
| Home / End | Start or end |
Theming
| Data attribute | Meaning |
|---|---|
data-playing, data-paused, data-loading, data-ended, data-error, data-muted | Player state, on the root |
API reference
AudioPlayer
Prop
Type
AudioPlayerPlay
Prop
Type
AudioPlayerSkipBack, AudioPlayerSkipForward
Prop
Type
AudioPlayerTime
Prop
Type
AudioPlayerRate
Prop
Type