Limeplay - Open Source Video Player UI ComponentsLimeplay
Blocks

Audio Player

A compact audio player with playlist support, timeline scrubbing, volume controls, repeat and shuffle modes, and track artwork.

Installation

npx shadcn add @limeplay/audio-player

Usage

import {
  AudioPlayer,
  type AudioPlayerAsset,
} from "@/components/limeplay/audio-player/components/media-player"

const playlist: AudioPlayerAsset[] = [
  {
    duration: 372_000,
    id: "soundhelix-1",
    poster: "https://placehold.co/160x160/png",
    src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
    title: "SoundHelix Song 1",
  },
]

export function Player() {
  return <AudioPlayer playlist={playlist} />
}

Features

  • Playlist queue with track artwork, title, genre, and duration.
  • Fixed timeline with elapsed, duration, hover time, and scrub support.
  • Previous, play/pause, next, volume, mute, repeat, and shuffle controls.
  • Playback URL resolution for direct src values or playbackUrls.primary endpoints.
  • Automatic skip/reload behavior for recoverable load and playback failures.

Notes

  • AudioPlayer does not ship with bundled tracks. Pass a playlist from your app.
  • Use duration in milliseconds when you want stable duration labels before metadata loads.
  • Use resolveSource for signed audio URLs, token refresh, or custom playback URL APIs.

API Reference

Prop

Type

Attribution

Inspired by Youtube Music.

License & Usage

  • Free to use and modify in personal and commercial projects.
  • Attribution to Limeplay is appreciated but not required.
  • Do not resell the registry item as a standalone component library.

On this page