Music Player | Vengeance UI

Installation

Run the following command

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/music-player.json

Usage

code

1import { MusicPlayer, type MusicTrack } from "@/components/ui/music-player"
2
3const tracks: MusicTrack[] = [
4  { title: "Play It", artist: "Witchitaw", src: "/songs/play-it.mp3", artwork: "/artwork/witchitaw.jpg" },
5  { title: "Real Time", artist: "Tilden", src: "/songs/real-time.mp3", artwork: "/artwork/tilden.jpg" },
6]
7
8export function MusicPlayerDemo() {
9  return <MusicPlayer tracks={tracks} accentColor="#ff6a00" />
10}

Props

Prop Name	Type	Default	Description
tracks	`MusicTrack[]`	`-`	Playlist to play through: { title, artist, src, artwork? }. Renders nothing when empty.
avatar	`string`	`-`	Floating avatar image. Falls back to the current track's artwork.
startIndex	`number`	`0`	Index of the track to start on.
autoPlay	`boolean`	`false`	Begin playing as soon as the player mounts (browsers may block until interaction).
loop	`boolean`	`true`	Wrap from the last track back to the first when a track ends.
defaultCollapsed	`boolean`	`false`	Render collapsed (compact pill) on first paint.
showProgress	`boolean`	`true`	Show the seekable progress bar along the bottom edge.
accentColor	`string`	`'currentColor'`	Accent color for the equalizer bars and progress fill.
onTrackChange	`(track: MusicTrack, index: number) => void`	`-`	Called whenever the active track changes.
className	`string`	`-`	Additional classes for the root element.