Music Player

Cards 74

About

Minimal Music Player A clean, modern music player with album art focus, intuitive controls, and smooth playback experience. Ideal for streaming platforms, playlists, or showcasing audio content with style.

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

Code

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

Usage.tsx

import React from 'react';
import { MusicPlayer } from '@/components/ui/music-player'; // Adjust the import path as needed

const MusicPlayerDemo = () => {
  const song = {
    albumArt: 'https://cdn.21st.dev/assets/mirror/8c/8c8a12c63e4f1b14b614a2a5b16ec4ecd342a9aaa8b81772b043cccfbf6128ca.jpg', // Replace with a real image URL
    songTitle: 'Sunshine Mix',
    artistName: 'Lookee Stefane',
    // A placeholder audio file. Replace with your own audio file URL.
    audioSrc: 'https://cdn.21st.dev/assets/mirror/ca/cadd2666c5571e12fafdb21697b26aef6f196a5a9c28e708129870167679991d.mp3',
  };

  return (
    <div className="min-h-screen w-full bg-gray-100 dark:bg-black flex items-center justify-center p-4">
        <MusicPlayer
          albumArt={song.albumArt}
          songTitle={song.songTitle}
          artistName={song.artistName}
          audioSrc={song.audioSrc}
        />
    </div>
  );
};

export default MusicPlayerDemo;