Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Speed Select Audio Blog Block for Solid

A read-aloud list: a Select picks the playback speed and every article's listening time and the total recompute, beside a waveform drawn from the title's letters with chapter ticks.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An audio articles block for Solid with Ark UI, written for Lullwick, an app that narrates the week's long reads. A header carries a playback-speed Select (1x, 1.25x, 1.5x, 2x) at its end. Under it, five articles run as rows rail to rail: the title, the narrator as initials, a fixed date, the chapter count, a waveform with one bar per letter of the title and a tick under it for every chapter, and a "Listen" link that says how long the article takes at the chosen speed. A band at the foot adds it all up and says how many minutes the speed saves against 1x. It's built from Select, Avatar and Guides. For a read-aloud feature, a narrated newsletter or any list where a speed changes the time. Nothing plays here: the waveform is a drawing and Listen is a link to the article's page.

FAQ

How are the listening times worked out?

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.

Why does the waveform look like that?

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.

How does the Select work?

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 uses a list collection built from the items.

Does Listen play anything?

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.

How does it fit on a phone?

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.

Does it work right to left?

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.