Now Playing

Accessibility

• Every control is a labelled button, and Shuffle and Repeat use aria-pressed.
• Progress is a native slider that reads like 1:12 of 3:12.
• The equalizer is decorative, and the words Now playing or Paused say the state.

Motion

• The equalizer bars rise and fall out of phase on a 900 ms loop, and pause offscreen.
• Pausing settles the bars at 3 px and morphs the icon in 200 ms.
• Progress keeps its place, and follows the pointer while seeking.
• With reduced motion, the bars stay still and the icon swaps.

Responsive behavior

• 384 px on Web and 358 px on Mobile.
• On Mobile, the play button grows to 52 px.
• Compact is 68 px tall on both.

Performance

• The equalizer is a CSS animation, paused by one shared observer when it leaves the screen.
• The progress bar is a transform on the fill, updated once a second.
• The timer stops while paused, while seeking and when you control elapsed.

• Import NowPlaying and NowPlayingArt from @/components/fetaui/now-playing and pass track with title, artist and length in seconds.
• No audio plays. Connect playing, elapsed and onSeek to your player. Without elapsed the card keeps its own clock.
• onNext, onPrevious and onMore are yours. Shuffle only toggles, with onShuffleChange to read it. Repeat restarts the track on the card's own clock, and onRepeatChange reports it.
• compact is the one line mini player, without seek, Previous or More. Composes Card and Icon Button.