Let's invent the wheel: an article in 30 seconds

"Don't reinvent the wheel" is good advice when you need to ship. When you want to learn, building it yourself teaches more. This series tries small UI ideas in short notes: the idea, how I built it and what I learnt. The demo to try is at the end.

Idea

• not every reader has five or ten minutes to read your article, but many have two, or just thirty seconds
• what if an article let you choose how much of it you get, and whether you read or listen?
• listening works on a walk, while waiting for a bus or while cooking, when reading doesn't
• the writer saves time too, with no need to record their own summaries
• summaries have to be mine, and I have to stand behind them

Implementation

• AI drafted a 30 second and a 2 minute summary, then I rewrote both until they said what I meant
• a script on my machine sent each finished summary to ElevenLabs and saved the audio and word timings
• the page plays prerecorded audio files, so reading or listening does not call ElevenLabs or another AI service
• the words light up as they are spoken, so you can follow along or pick up where the voice is
• lock screen and headphone controls work, so the phone can go in your pocket

Result

• a 30 second version only works when the article has one clear point
• writing for the ear is different: no bullet points, short sentences, and every example needs its setup
• reviewing the summaries took longer than generating them, and that review is where the value is
• the recorded voice sounds far more natural than the browser's built-in speech, but every change to the text needs a new recording
• it suits articles that rarely change, not pages updated every day
• a summary saves the reader time only if someone stands behind it, which is the point of Bringing value now matters more than ever too

Technologies used

• ElevenLabs text to speech with timestamps records the voice and returns when each character is spoken
• CSS Custom Highlight API marks the spoken words without changing the text's markup
• Media Session API adds the lock screen and headphone controls

Output