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"

来源