shadcn.io is not affiliated with official shadcn/ui
Mini Player Music Block for Vue
A mini player bar docked under a drawn playlist page, with a thin progress line, transport, like and volume, that expands in place into a taller card with a lyric line, shuffle and repeat.
Installation
Overview
Keep the music in reach on every page, with this mini player for Vue with Ark UI. It draws a playlist page for Nestwave, a music app, in a stage inside a hairline frame with a plus mark on each corner, with the player docked at its foot as a bar: a small drawn cover, the title and artist, previous, play or pause and next, a like Toggle, a Slider for the volume from the medium breakpoint, and a thin progress line across the bar's top edge that you can press or drag to seek. Play is the only Shine Button. Expand swaps the bar for a taller card in the same stage, with a larger cover, a lyric line, a seek slider, shuffle and repeat toggles and the volume, and Collapse swaps it back, so the stage never changes height. Skip moves through a queue of five, and a status line under the stage says what plays and that no audio plays in this demo. On a phone the volume hides and the card scrolls inside the stage. It's built from Slider, Toggle, Button, Shine Button and Guides, with a CSS entrance only. For music, podcast and radio apps.
FAQ
How do I use my own queue and page?
Edit QUEUE for the tracks (an id, title, artist, album, length in seconds, a lyric line and the cover art), and replace PageDrawing with your real page: the player is positioned at the foot of whatever sits in the stage, so in an app you dock the bar to the bottom of the layout and drop the stage's fixed height. The covers are drawn in code; swap Cover for an img of your own artwork.
How do Expand and Collapse work?
Expand replaces the bar with the card in the same stage, so nothing around it moves, and Collapse puts the bar back. Both buttons set aria-expanded, and focus moves to the control that replaces the one you pressed, so a keyboard user never loses their place. The track, position, likes and volume are shared by both views.
Does anything play, and what stays local?
No. The status line says so: no audio plays in this demo. Play only changes state and shows three pulsing bars; the position moves only when you seek or skip. Likes, shuffle, repeat and the volume live in the page and reset on a reload. To make it real, put an audio element behind the transport and drive position from its time updates.
How does the thin progress line work?
It is a drawn line over a native range input that fills the same strip and is invisible, so it is exactly as accessible as any slider: it is named Position in the track, it moves with the arrow keys, Home and End, and its value is read in minutes and seconds. A focus ring thickens the line, and it stays left to right on a right-to-left page.
What do the skip buttons do at the ends of the queue?
Next after the last track goes to the first, and Previous goes back to the start of the track if more than three seconds have played, and to the track before it otherwise, wrapping from the first to the last. The status line names the track you land on.
What moves, and how does it look on a phone?
Only the three bars in the status line, and only while it plays; they stay still under reduced motion. On a phone the bar keeps the cover, the title, the transport, the like and Expand, the volume slider is hidden, and the expanded card scrolls inside the stage rather than growing it.