Audio Player
<audio> element with no player library.AudioPlayer is a separate component with the same visual language. It wraps a plain <audio> element and mirrors that element's events, so the UI stays correct when a media key, the OS, or the native controls change playback.Audio hero
Artwork, transport, scrubber and volume in a full hero card. Built on a plain <audio> element.
variant"hero"- is the default — artwork beside its own transport.
audioUrlandartworkUrlare the only two props it really needs. skipSeconds{10}- sizes the rewind and forward jumps. Set it to
0to drop both buttons.
Compact bar
The same player as one row — for a sidebar, an episode list, or a sticky footer.
variant"bar"- collapses artwork, copy and transport into a single row. The volume slider hides below
smwhere there is no room for it.
Native controls
The browser's own audio controls under the artwork — nothing custom to keep in sync.
variant"native"- renders
<audio controls>instead of the custom transport. The most accessible option by default, and the one that inherits platform features like playback speed for free.
Installation
Install Audio Player
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Nothing beyond the shared setup — Audio Player needs only the cn helper and lucide-react, which the installation guide already put in place.
Plyr audio
mediaType="audio" and the card drops its video frame and sizes to the control bar. Use it when you want Plyr's control bar for both media types across a site.Plyr — Audio
The same component in its audio layout, with no video frame.
mediaType"audio"- renders an
<audio>element, so the card drops the aspect ratio and sizes to the control bar.
Install the Plyr player
Install Video Player (Plyr)
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Step 1 installs this for you. Run it yourself only if you are adding Video Player (Plyr) to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.
plyr is an npm package.
Features
Three Layouts
A hero card with artwork and glow, a compact bar for lists and footers, or the browser's own controls inside the same shell — one prop.
No Player Library
Everything sits on a native <audio> element, so the only weight added is the icons.
Mirrors the Element
Playback state follows the element's own events, so a media key, the OS, or the native controls changing playback never leaves the UI out of sync.
Themed Accent
The play button and progress fill read --theme-color, falling back to your --primary, so the player matches the rest of the page.
Props Reference
AudioPlayer
| Prop | Type | Default | Description |
|---|---|---|---|
audioUrl | string | "https://cdn.plyr.io/..." | Audio file the browser plays natively — mp3, ogg, wav, m4a. |
audioType | string | "audio/mpeg" | MIME type on the <source>, so the browser can skip a format it cannot play. |
variant | "hero" | "bar" | "native" | "hero" | Full artwork card, single compact row, or the browser's own <audio controls> under the artwork. |
artworkUrl / artworkAlt | string | "https://images.unsplash..." | Cover image and its alt text. |
badge / title / subtitle | string | "Now Playing" / … | Track copy. subtitle is the natural place for the artist or show name. |
skipSeconds | number | 10 | Seconds the rewind and forward buttons jump. 0 hides both. |
autoPlay / loop | boolean | false | Passed to the <audio> element. Autoplay is blocked without a prior interaction on most browsers. |
preload | "none" | "metadata" | "auto" | "metadata" | How much the browser fetches up front. metadata is enough to show the duration. |
enableGlow | boolean | true | Ambient blur gradient behind the card. |
onPlay / onPause / onEnded | () => void | undefined | Playback callbacks for analytics. |