Music Player

A stylish, glassmorphism music player component for media applications.

Preview

Midnight City
NOW PLAYING

Midnight City

M83

Hurry Up, We're Dreaming

1:204:03
Component not found in registry.

Usage

tsx
12 lines
1
2
3
4
5
6
7
8
9
10
11
12
import { MusicPlayer } from "@/components/ui/music-player"

export default function Dashboard() {
  return (
    <div>
      <MusicPlayer 
        title="Song Title" 
        artist="Artist Name" 
      />
    </div>
  )
}

Props

PropTypeDescription
imagestringURL of the album art image (default: Unsplash Image).
titlestringSong title (default: 'Until I Found You').
artiststringArtist name (default: 'Stephen Sanchez').
albumstringAlbum name or subtitle (default: 'Single • 2022').
currentTimestringCurrent playback time string (default: '2:05').
totalTimestringTotal duration string (default: '4:08').
progressnumberProgress percentage (0-100) (default: 33).
classNamestringAdditional CSS classes.