DocsMusic 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

Dependencies: framer-motion

Usage

API Reference

PropTypeDefault
srcstring

The source URL of the audio file or YouTube video to play.

—
coverArtstring

The URL of the album cover image (used as record label and background).

—
autoPlayboolean

Whether to auto-play the audio when the component mounts.

false
classNamestring

Additional CSS classes to apply spacing or override styles.

—

Keep in mind

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

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousMagnetic DockNextNewsletter Bookshelf

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"
    />
  );
}