Music Player Widget

Cards 378

About

A sleek modern music player with an audio-reactive dot-grid visualizer, spinning disc, smooth cover/track crossfades, and a Web Audio API beat-sync oscillator. Zero external animation dependencies, pure CSS keyframes and requestAnimationFrame.

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

Code

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

Usage.tsx

import { MusicPlayer, type Track } from '@/components/ui/music-player-widget';

const tracks: Track[] = [
  {
    title: 'Southern Roots Boogie',
    artist: 'Falconer',
    cover: 'https://cdn.21st.dev/assets/mirror/ba/bafb64c13ba4ed85d598cc318a62f9a5129f3abaecee80943d495e7356fd0603.jpg',
    src: 'https://cdn.21st.dev/assets/mirror/ca/cadd2666c5571e12fafdb21697b26aef6f196a5a9c28e708129870167679991d.mp3',
  },
  {
    title: 'Sax Party',
    artist: 'Ofer Koren',
    cover: 'https://cdn.21st.dev/assets/mirror/ca/ca5a0ecf3ecbf81caded68eb892149e9d2f060c50dfbefd6ca1c04792856a049.jpg',
    src: 'https://cdn.21st.dev/assets/mirror/ab/ab5cb08483abe63edd2a2ce4d843ad8f3073fcbb4a738a94f6b7529df3e1b437.mp3',
  },
  {
    title: 'Nonsense',
    artist: 'Raw',
    cover: 'https://cdn.21st.dev/assets/mirror/d0/d0d6fb080fce7745734593c815edf73ac22bbbe5e7b3424324d191af8b058833.jpg',
    src: 'https://cdn.21st.dev/assets/mirror/79/793e6ffda56e28691998b90a55bdaf0f2bccb8950cd8a7ee9ef7421c4ebbafdb.mp3',
  },
];

export default function Default() {
  return (
    <div
      style={{
        minHeight: '100vh',
        display: 'grid',
        placeItems: 'center',
        padding: 32,
      }}
    >
      <MusicPlayer tracks={tracks} crossOrigin="anonymous" />
    </div>
  );
}