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

Описание и применение

Создан автономный HTML‑файл, воспроизводящий аудио с синхронным подсвечиванием слов, без сетевых запросов и зависимостей, обеспечивая конфиденциальность и совместимость с любыми устройствами.

Задача

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.

Результат

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.

Рабочий процесс

• 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.

Доказательства

"zero network requests, zero dependencies, zero accounts"

Источник

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

Источник

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

Источник

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

Источник