One HTML File, Zero Requests: Building a Read-Along Player With Word-Level Highlighting

Description and use

A self‑contained HTML file plays audio with word‑level highlighting, requiring no network, preserving privacy, and enabling offline use.

Problem

Create a self‑contained read‑along audio player that keeps all user data local and works offline, while synchronizing word‑level highlighting with the spoken audio.

Outcome

The resulting HTML file plays a chapter of audio while highlighting each spoken word exactly, with zero network requests, no dependencies, and no user accounts. The same alignment data also powers M4B audiobook exports and karaoke MP4 videos.

Workflow

• 1. Generate audio sentence‑by‑sentence using a TTS engine.
• 2. Align the audio with the source text using whisper.cpp to produce word‑level timestamps.
• 3. Map whisper’s transcript words to the original source text with SequenceMatcher, ensuring the UI renders the source text while using the transcript only for timing.
• 4. Embed the audio as a data URI and the timestamp table inline in an HTML file.
• 5. Use a timeupdate event on an <audio> element to binary‑search the current word and toggle a CSS class on the corresponding <span>.
• 6. Store playback progress in localStorage and support dark mode via prefers‑color‑scheme.
• 7. Export the same timestamps to create M4B audiobooks and karaoke‑style MP4 videos.

Evidence

"zero network requests, zero dependencies, zero accounts"

Source

"58.8 seconds of audio → complete word-level timestamps in 2.87 seconds"

Source

"the highlighter renders the source text, never the transcript"

Source

"Once word timing exists, it composes: M4B audiobook export, Karaoke MP4"

Source