Music Player
Controls playback in one bar: track identity, transport, and a scrub slider.
Configurations
Supported configurations for this component.
Configurations
7 examplesPlaying
Paused
Liked
Muted
At the end
Shuffle and repeat on
Single track
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| track | { title: string, subtitle: string, cover: string | null } | DEFAULT_TRACK | Track identity shown in the metadata region. |
| playing | boolean | false | Play state; the internal fallback's initial value when onTogglePlay is omitted. |
| elapsed | number | - | Controlled elapsed seconds; supplying it stops the internal demo timer. Omitted, the timer runs from zero (onSeek alone does not make it controlled). |
| duration | number | 221 | Track length in seconds. |
| volume | number | 72 | Volume 0..100; local fallback when onVolumeChange is omitted. |
| liked | boolean | false | Liked state; local fallback when onLike is omitted. |
| onTogglePlay | () => void | - | Primary play/pause handler; omission enables local play state. |
| onSeek | (seconds: number) => void | - | Scrub handler; with `elapsed` omitted, scrubs also move the local timer. |
| shuffle | boolean | false | Shuffle state, shown as a pressed Shuffle button. It changes only through onShuffle. |
| repeat | boolean | false | Repeat state, shown as a pressed Repeat button. It changes only through onRepeat. |
| onNext | () => void | - | Next-track handler; without it the Next button renders disabled. |
| onPrev | () => void | - | Previous-track handler; without it the Previous button renders disabled. |
| onShuffle | () => void | - | Shuffle handler; without it the Shuffle button renders disabled. |
| onRepeat | () => void | - | Repeat handler; without it the Repeat button renders disabled. |
| onLike | () => void | - | Like-toggle handler; omission enables local liked state. |
| onVolumeChange | (volume: number) => void | - | Volume handler; omission enables local volume state. |
| onLyrics | () => void | - | Lyrics handler; the Lyrics button renders only when provided. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
AI Canvas