Components · Media
MusicPlayer A player built like a small instrument: one screen with title, big time, segmented progress and a level meter; three labelled keys; a repeat key and a volume fader. Without src it simulates playback, so mocks work.
jsx Copy
import { MusicPlayer } from '@andeus/ui' ;Full 03 / 04
Default button
The Stripes
01 Platinum hours · Halden Ensemble 3:34
02 Less, but better · Ines Okafor 3:07
03 Default button · The Stripes 4:02
04 Field recording 44 · Marek Lind 2:43
jsx Copy
<script >
const tracks = [
{ title: 'Platinum hours' , artist: 'Halden Ensemble' , src: '/audio/01.mp3' , color: 'var(--screen-orange)' },
{ title: 'Less, but better' , artist: 'Ines Okafor' , src: '/audio/02.mp3' , color: 'var(--screen-blue)' }
];
</script >
<MusicPlayer {tracks} ontrackchange={(i, t) => console.log(t.title)} /> Compact 02 / 04
Less, but better
Ines Okafor
jsx Copy
<MusicPlayer {tracks} variant="compact" /> Deck Andeus player
3. The Stripes — Default button (4:02) · 3. The Stripes — Default button (4:02) ·
320 kbps44 kHzEQ Shuffle Repeat
Playlist
1. Halden Ensemble — Platinum hours 3:34
2. Ines Okafor — Less, but better 3:07
3. The Stripes — Default button 4:02
4. Marek Lind — Field recording 44 2:43
Play selected 6:41 / 13:26
jsx Copy
<MusicPlayer {tracks} variant="deck" title="Andeus player" /> Mini 1. Platinum hours — Halden Ensemble · 1. Platinum hours — Halden Ensemble ·
00:00 jsx Copy
<MusicPlayer {tracks} variant="mini" /> Props Prop Type Default tracks Array<{ title, artist?, duration?, src?, color? }>sample color tints the screen for that track. defaultIndex number0 autoPlay booleanfalse showPlaylist booleantrue Full and deck. variant 'full' | 'compact' | 'deck' | 'mini''full' Deck: main, equalizer and playlist windows. Mini: one-line strip. title string'Andeus player' Deck title bar. showEqualizer booleantrue Deck only. onTrackChange (index, track) => void— width number | string—