Music Player
Block-scale transport bar. Track identity, the full transport cluster, a scrub slider with elapsed and remaining readouts, and like, lyrics, and volume controls — assembled from Andromeda primitives, driven by props with a live demo fallback.
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/andromeda-music-player2
For dark mode, add the dark class to your <html> element:
<html class="dark">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 | true | Play state; the internal fallback's initial value when onTogglePlay is omitted. |
| elapsed | number | - | Controlled elapsed seconds; omit it (and onSeek) to run the internal demo timer from zero. Supplying either one makes elapsed controlled and stops the timer. |
| 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; omission enables local seeking when elapsed is also omitted. |
| onNext | () => void | - | Next-track handler. |
| onPrev | () => void | - | Previous-track handler. |
| onShuffle | () => void | - | Shuffle handler. |
| onRepeat | () => void | - | Repeat handler. |
| onLike | () => void | - | Like-toggle handler; omission enables local liked state. |
| onVolumeChange | (volume: number) => void | - | Volume handler; omission enables local volume state. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
AI Canvas