Music Player Card

Cards 79

About

Music Player Card A visually polished and interactive music player card component. It features a glassmorphism effect, animated progress bar, and theme-adaptive styling, making it suitable for modern web applications.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Music Player Card to your project and fits it to your theme.

Code

How Music Player Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { MusicPlayerCard } from "@/components/ui/music-player-card";

const DURATION_IN_SECONDS = 185; // e.g., 3 minutes and 5 seconds

export default function MusicPlayerDemo() {
  const [isPlaying, setIsPlaying] = React.useState<boolean>(false);
  const [isLiked, setIsLiked] = React.useState<boolean>(false);
  const [currentProgress, setCurrentProgress] = React.useState<number>(52); // Start at 52 seconds

  // Effect to simulate song progress with advanced animation
  React.useEffect(() => {
    let interval: NodeJS.Timeout;
    if (isPlaying) {
      interval = setInterval(() => {
        setCurrentProgress((prev) => {
          if (prev >= DURATION_IN_SECONDS) {
            setIsPlaying(false); // Stop playing when song ends
            return 0; // Reset progress
          }
          return prev + 1;
        });
      }, 1000);
    }
    // Cleanup on component unmount or when isPlaying changes
    return () => clearInterval(interval);
  }, [isPlaying]);

  const handlePlayPause = () => {
    setIsPlaying((prev) => !prev);
  };

  const handleLike = () => {
    setIsLiked((prev) => !prev);
  };
  
  const handleNext = () => {
    console.log("Next button clicked");
    // Logic to skip to the next track
    setCurrentProgress(0); // Reset progress for demo
  };

  const handlePrev = () => {
    console.log("Previous button clicked");
    // Logic to go to the previous track
    setCurrentProgress(0); // Reset progress for demo
  };
  
  const handleShare = () => {
    console.log("Share button clicked");
    // Logic to open share dialog
  };

  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-4">
      <MusicPlayerCard
        artistName="Terence Howard"
        artistHandle="@terenceh"
        avatarSrc="https://cdn.21st.dev/assets/mirror/21/21d021e881d1d1c7387c092e3c0823f851433814e907717eb3373166c9fd8f2b.jpg"
        albumArtSrc="https://cdn.21st.dev/assets/mirror/81/81847341f11bf6f57664c06e6d5827e684b4d96f51ba0b087544be7f96f1ef01.jpg"
        songDuration={DURATION_IN_SECONDS}
        currentProgress={currentProgress}
        isPlaying={isPlaying}
        isLiked={isLiked}
        onPlayPauseClick={handlePlayPause}
        onLikeClick={handleLike}
        onNextClick={handleNext}
        onPrevClick={handlePrev}
        onShareClick={handleShare}
      />
    </div>
  );
}