shadcn.io is not affiliated with official shadcn/ui
Audio Player Dialog Block for Vue
An ambient-sound library's page with its mini player shown open over it: a floating panel with the track, a seek slider and its time, Previous, Play and Next, and a volume slider with mute. It isn't modal, so the page stays usable, and nothing really plays.
Installation
Overview
Keep the music in reach without taking over the page, with this mini player for Vue with Ark UI. It floats over the Soundscapes page of Hushwave, an ambient-sound app: the header holds an outline Player Button that shows and hides it, and the page itself is drawn inside a hairline frame with a plus mark on each corner, six albums over a now-playing bar. The player is a Floating Panel that floats over the page and is not modal, so there is no scrim and nothing is hidden or trapped. It shows the current track out of a queue of four, a Slider to seek with the elapsed and total time under it, Previous, Play or Pause and Next, and a second Slider for the volume with a mute button. Play is the only Shine Button and starts a live indicator, three bars that Pause stops. Seeking and skipping change the time and the track on the panel and on the drawn page's now-playing bar. For preview the player is drawn open in place when the page loads; the Player button opens the real Floating Panel, which you can drag by its header, minimise to a pill and restore, with the same track and the same position. For music, podcasts, ambient and focus apps and anything with a queue.
FAQ
Why is the player already open, and what do I keep?
So you can see it without a click. On load the player is a copy drawn in place at the foot of the page: a native dialog element that isn't modal, with no scrim, so nothing is trapped, hidden or focused, and the page around it keeps working. The Player button in the header opens the real Floating Panel and the copy stays closed until a reload. Both show the same PlayerBody component and share the block's state, so a track skipped in the copy is the one in the real panel. In your app keep the Floating Panel and drop the copy: the "in-place" state and the dialog element inside the frame.
Does anything really play?
No, and the panel says so under the controls: no audio plays in this demo. Play only changes state: the bars start, the button becomes Pause, and a polite status message names the track. The time never ticks by itself, so the preview never ages. To make it real, put an audio element behind PlayerBody, call its play and pause in toggle, set position from its time updates and its currentTime from onSeek, and read QUEUE from your library.
How do dragging, minimising and closing work?
The real panel is a Floating Panel: drag it by its header, minimise it to a pill with the first button, restore it with the second and close it with the third. In a preview it stays inside the frame. Dragging is pointer-only, and nothing needs it: the panel opens in view and the Player button shows and hides it from the keyboard. Escape closes it. The copy shown on load has a close button instead of the drag and the minimise.
How are the controls named and operated?
Every control has a name a screen reader reads: Previous track, Play or Pause, Next track, Mute, and two labelled sliders, Position in the track with its value in minutes and seconds, and Volume in percent. The sliders move in steps of five with the arrow keys and jump with Home and End, and they stay left to right on a right-to-left page, like the time they show. Previous and Next wrap around the queue and start the track from its beginning, and Mute is a toggle button with its pressed state exposed.