Progress Ring Music Streaming Navbar Block for React

No. It is the control, not a player: the position is a number in state that a one-second setInterval raises while Play is pressed, and the tick stops as soon as it is released. There is no audio element. To wire it to one, call play() and pause() from toggle and set position from the element's timeupdate.

The ring is Circular Progress drawn in the foreground tone, filled to the share of the current track played. It is decoration: the button's own name is "Play" and it is pressed while playing (its icon turns to Pause); Previous and Next have tooltips. A hidden status region, empty until your first press, says "Playing: Low Tide Radio, Hollow Reed" or "Paused: …" whenever the track or the state changes, so it speaks when a preview ends and the next one starts, and never once a second.

Only while a track plays: the ring (a steady one-second step), the four equalizer bars and, for a title that doesn't fit, the marquee. At rest nothing moves. Under reduced motion the ring steps without a transition, the bars hold one height and the marquee is replaced by plain text with an ellipsis. Pausing stops all three at once.

The text is measured against its box (on load and on resize). If it fits, it is plain text. If it doesn't, it stays truncated at rest and becomes a marquee while playing. The second preview ("A Long Way Down the Lantern Road") does; try it.

Next goes to the next preview and wraps round after the last. Previous restarts the current preview if it has played more than three seconds, and otherwise goes back one. When the last preview ends, the player pauses and returns to the start. Change TRACKS, LENGTH and START at the top of the file to use your own.

Below sm the divider, Previous and Next go and the ring with Play stays beside the wordmark; below md the track line and bars are hidden. A menu button opens a sheet from the top with the three links and the Go ad-free button; below lg that button is in the sheet. Choosing a link closes it.

Edit PAGES: the bar and the sheet read it, and the page you're on takes aria-current="page". Every link points at #. Go ad-free renders the link it's given with render, with nativeButton={false}.