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.
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>
);
}