shadcn.io is not affiliated with official shadcn/ui
Audio Player Dialog Block for React
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 React with Base 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.
Related
- Pro
Voice Recorder Dialog
Media and widgetsA voice-memo list with a simulated recorder dialog shown open: a record button with a one-second clock up to 0:12, a waveform that fills as it runs, a trim slider with two thumbs, a name field, an inline discard check and a Save memo button that adds the memo to the list.
- Pro
Sleep Timer Dialog
Drawers and popoversA podcast player with its sleep timer drawer shown open: presets and a fine-tune slider, the stop time worked out from a typed clock, a fade switch, a linear track with the fade zone hatched, and a running state with the time left.
- Pro
Progress Ring Music Streaming Navbar
Players and clocksA navbar for a music streaming service: three links, then a mini player with Play inside a ring that fills as the track goes, Previous and Next, a marquee for long titles and equalizer bars that stop at rest.
- Pro
Featured Release Footer
Content and updatesA record-label footer with a featured release, a drawn cover, a short equalizer and listen links beside two columns.
- Pro
Pomodoro Timer Dialog
Time and schedulingA focus timer's Today page with its dialog shown open: a Focus, Short break and Long break switch, a ring that fills with the digits inside it, Start and Pause, four session dots and durations that apply at the next start.
- Pro
App Rating Dialog
Drawers and popoversA water tracker's Today screen with its rating drawer shown open over a drawn phone: five stars with a word each, then a branch, where four or five stars offers the store and one to three asks what could be better, with topics and a note.