Docs/Music Player

Music Player

A playful circular audio player built to look like a spinning vinyl record with a swinging tonearm.

Installation

$pnpm dlx shadcn@latest add @componentry/music-player

Usage

API Reference

PropTypeDefault
srcThe source URL of the audio file or YouTube video to play.
string—
coverArtThe URL of the album cover image (used as record label and background).
string—
autoPlayWhether to auto-play the audio when the component mounts.
booleanfalse
classNameAdditional CSS classes to apply spacing or override styles.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv

Click the Record to Play

Features a spinning record animation and a tonearm overlay.

import { MusicPlayer } from "@/components/ui/music-player";

export default function Demo() {
  return (
    <MusicPlayer 
      src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
      coverArt="https://i.scdn.co/image/ab67616d0000b27315ebbedaacef61af244262a8"
      className="w-full max-w-sm"
    />
  );
}