✦ StealThis .dev
Composants UI Moyen

Music — Sticky Bottom Player Bar

A polished, sticky bottom now-playing player bar with a CSS-drawn album cover, animated equalizer, and a morphing play/pause button. Transport controls cover shuffle, previous, next, and repeat, while a click-and-drag scrubber advances current and total time during simulated playback. The right side adds a volume slider with mute, a queue toggle, and full-screen expand — all keyboard-accessible with ARIA slider and pressed states.

Ouvrir dans Lab
html css vanilla-js
Targets: JS HTML

Code

Sticky Bottom Player Bar

A glassy, dark-first player bar pinned to the bottom of the viewport, modeled on the now-playing strip you’d find in a streaming app. The left cluster shows a small CSS-drawn album cover (gradients and shapes, no images), the track title and artist, and a heart toggle that saves the song. While playback is “on”, a tiny equalizer animates over the cover so the active state reads at a glance. The bar pulls its accent color from each track’s cover, so the scrubber, toggles, and current queue row all re-theme as the song changes.

The center holds the full transport row — shuffle, previous, a morphing play/pause button, next, and repeat — above a draggable progress scrubber with live current and total timestamps. Playback is simulated with a requestAnimationFrame loop: the fill and thumb advance, time labels update, and the track auto-advances (or repeats) when it ends. The scrubber supports click, pointer-drag, and arrow-key seeking. On the right, a volume slider with a mute morph button, a queue toggle, and a full-screen expand button round out the controls.

Everything is keyboard-usable: the scrubber and volume control expose role="slider" with aria-valuenow/aria-valuetext and respond to arrow, Home, and End keys; play, like, shuffle, repeat, and mute carry aria-pressed. Space toggles playback and m mutes. A small toast() helper surfaces feedback for seeks, likes, and mode changes, and the layout collapses gracefully down to ~360px.

Illustrative UI only — fictional artists, albums, tracks, and data. No real audio playback.