Nyx UI

Music Player

A music player with morphing collapse animation, glass controls, real playback, and a queue.

InteractiveMediaPlayer
Open in Playground

Music Player is a fully functional audio player that collapses from an expanded player with artwork and queue into a compact pill, morphing between the two layouts with Framer Motion. It plays real audio files, tracks progress on a seekable bar, and manages a queue of tracks. The glassmorphic controls are props-driven. Built with React and Tailwind CSS. Use it for portfolio music demos, podcast landing pages, and anywhere a browser audio player needs to look designed rather than default.

Installation

Usage

import { MusicPlayer } from "@/components/ui/music-player";
import type { Track } from "@/components/ui/music-player";

Basic Usage

const sampleTrack: Track = {
  id: "1",
  title: "Blinding Lights",
  artist: "The Weeknd",
  artwork: "/path/to/artwork.jpg",
  duration: 200,
};
 
export default function BasicUsage() {
  return <MusicPlayer currentTrack={sampleTrack} />;
}

Real Audio Playback

Pass a url to play actual audio. When omitted, the player runs in simulated mode.

const sampleTrack: Track = {
  id: "1",
  title: "Blinding Lights",
  artist: "The Weeknd",
  artwork: "/path/to/artwork.jpg",
  duration: 200,
  url: "/path/to/audio.mp3", // local or remote URL
};
 
export default function RealAudio() {
  return <MusicPlayer currentTrack={sampleTrack} />;
}

Advanced Usage with Queue

export function AdvancedPlayer() {
  const playlist: Track[] = [
    {
      id: "1",
      title: "Sugar",
      artist: "Maroon 5",
      artwork: "/path/to/artwork1.jpg",
      duration: 240,
      url: "/path/to/audio1.mp3",
    },
    {
      id: "2",
      title: "Payphone",
      artist: "Maroon 5",
      artwork: "/path/to/artwork2.jpg",
      duration: 210,
      url: "/path/to/audio2.mp3",
    },
  ];
 
  return (
    <MusicPlayer currentTrack={playlist[0]} queue={playlist} autoPlay={false} />
  );
}

Collapse / Expand

The player morphs between a compact pill bar and the full immersive card. The collapse button is in the top-left corner of the expanded card; click the thumbnail or title in the collapsed bar to expand again.

Keyboard Shortcuts

Shortcuts are active while the player has focus (click it or Tab to it).

KeyAction
SpacePlay / Pause
← / →Seek -10s / +10s
↑ / ↓Volume up / down

Types

Track Interface

interface Track {
  id: string;
  title: string;
  artist: string;
  album?: string;
  artwork: string;
  duration: number;
  url?: string;
}

Props

MusicPlayer

Track Fields

FieldTypeRequiredDescription
idstringYesUnique identifier
titlestringYesTrack title
artiststringYesArtist name
albumstringNoAlbum name (shown in expanded view if provided)
artworkstringYesCover image URL (local or remote)
durationnumberYesTrack length in seconds
urlstringNoAudio file URL. Enables real audio playback

Props

MusicPlayer

PropTypeDefaultDescription
currentTrackTrackundefinedCurrent track object containing metadata (falls back to internal default if not provided)
queueTrack[][]Array of tracks in the playlist queue
currentIndexnumber0Index of the current track in the queue
classNamestring""Additional CSS classes to apply to the component
autoPlaybooleanfalseWhether to start playback automatically
showEqualizerbooleantrueShow animated equalizer bars next to the track title
accentColorstring"var(--foreground)"Accent color for active playing waveform, toggle indicators, and active queue row
onPlayPause(isPlaying: boolean) => voidundefinedCallback triggered when play/pause is toggled
onTimeChange(time: number) => voidundefinedCallback triggered when playback time changes
onTrackEnd() => voidundefinedCallback triggered when track playback ends
onTrackChange(track: Track, index: number) => voidundefinedCallback triggered when track changes (next/previous)
onVolumeChange(volume: number) => voidundefinedCallback triggered when volume changes