Speed Select Audio Blog Block for React

Each article has its time at normal speed in minutes. The Select divides it by the speed and rounds up to a whole minute, never below one: 18 minutes at 1.5x is 12. The total is the sum of those rounded rows, so the band always equals the rows you see, and the saving is the 1x total minus it.

It's drawn from the title: one bar per letter, the height taken from the letter's character code and its place, with a short bar for each space. The same title always draws the same wave, with no random numbers. The ticks under it are the chapter starts, as percentages of the article. The drawing is hidden from assistive technology (the chapter count is in the text) and never mirrors in a right-to-left page.

It's the catalog's Select with four items, always one chosen. Choosing a speed updates every row and the foot band and sets a polite status line. It takes the item values directly.

No. Each Listen link goes to the article's page (href="#" here). To add a player, put your own audio element on that page; this block only draws the list and the arithmetic.

Each row stacks: title and narrator, then a thinner waveform across the full width, then the Listen link. The Select sits under the header and is full width.

Yes. The rows and the header mirror, the times, dates and counts are isolated with bdi so digits stay whole, and the waveform keeps its direction because it is artwork.