Player

Music and media

The v5 media kit (PLAN.md §19), built for Playlist Lab: track rows, album grid, the now-playing bar (docked at the bottom of this page), queue, waveform scrubber, shuffle/repeat/like toggles, lyrics and a mini player. Built on core's .transport, .btn-go, .knob and the image card.

Track rows .tracklist > .track

Number, art, title and artist, album, like, duration and a row menu. The number turns into a play button on hover or keyboard focus (on touch the number is the button). Row 3 is playing (animated equaliser, motion settings permitting), row 5 is selected (.is-active), rows 4 and 7 are explicit, liked rows keep their heart. The album column hides in a container under 480px.

  1. Night DriveLumen CoastHarbour Lights
  2. Signal FiresThe Quiet OrbitPaper Satellites
  3. UndertowMarisol VegaLow Tide Radio
  4. Glass HoursENorth AtlasGlasshouse
  5. Brass and EmberEddie Fenn TrioCopper Years
  6. Postcard StaticKite SeasonAfterimage
  7. A Very Long Song Title That Has To Truncate Cleanly On A PhoneEThe Quiet OrbitPaper Satellites

Album view: no art, no album column, current track paused

  1. Night DriveLumen Coast
  2. Harbour LightsLumen Coast
  3. Fog SignalELumen Coast
  4. Last FerryLumen Coast

Album grid .album-grid

Square image cards (.card.has-media). The play button (.card-play) shows on hover or focus, always on touch and on the playing album; the last card is still loading.

Now-playing bar .now-playing

The live one is this page's footer: in the shell's status slot, stuck to the bottom of the screen, clear of the home indicator. Desktop: art and title, transport over the scrubber, extras with volume. Tablet: the scrubber takes its own row and only the mute button remains. Phone: play and next only. Below, the same bar paused, in the page flow.

Brass and EmberEddie Fenn Trio

Mini player .now-playing.is-mini

The phone layout at any width, as a card: for a sidebar, a picture-in-picture corner or a popover.

Signal FiresThe Quiet Orbit

Play queue

Track rows with a drag handle (.track-handle, the app does the dragging) and a remove button. "Night Drive" is being dragged (.is-dragging) and will drop above "Brass and Ember" (.is-drop-target).

Now playing

  1. UndertowMarisol VegaLow Tide Radio

Next in queue

  1. Glass HoursENorth AtlasGlasshouse
  2. Night DriveLumen CoastHarbour Lights
  3. Brass and EmberEddie Fenn TrioCopper Years

Next from: Late drive

  1. Postcard StaticKite SeasonAfterimage
  2. Signal FiresThe Quiet OrbitPaper Satellites

Waveform scrubber .waveform

A real range input under a row of bars (one <i style="--level:…"> each). Drag or use the arrow keys: the played colour follows with no script. The second shows the hover preview (the app sets --hover from the pointer; this page's script does it on the first one too).

Shuffle, repeat, like and volume .media-toggle

On is the accent plus a dot (a filled heart for like), never colour alone, and nothing changes width. Repeat cycles off, all, one with three radios and no script (click, or arrow keys).

Shuffle
Repeat off / all / one
Button form (aria-pressed, .is-one)
Like
Volume
Volume as a console knob (.knob, needs controls.js)

Lyrics .lyrics

The current line carries aria-current="true"; an empty line is an instrumental break. The app scrolls the current line into view.

  1. Headlights on the harbour wall
  2. we counted ships we couldn't see
  4. The tide came in and took the call
  5. and left the dial tone out at sea
  6. So hold the line, hold the line
  7. the static sounds like you to me
  8. Hold the line, hold the line
  9. till morning finds the frequency

Playing glyph .equaliser

Animated while playing (still under reduced motion), held with .is-paused. Here in a playlist sidebar whose selection is radios, no script.

Playing Paused