How I Rendered 159 Narrated Lesson Videos With Free, Open-Source Tools

说明与用途

使用 Kokoro TTS、Playwright 和 ffmpeg 的自动化流水线，免费生成了 159 个 1080p 讲解视频，包含字幕和章节。

问题

Producing 159 narrated lesson videos manually was infeasible; needed an automated pipeline that stays in sync with lesson content and uses only free, open‑source tools.

结果

159 narrated videos totaling ~5.6 hours were produced for free, each 10–14 MB at 1080p, with captions and chapters, and uploaded to YouTube.

工作流

• Convert lesson TypeScript data to a JSON video spec that lists scenes, slide layouts, narration sentences and reveal steps.
• Generate narration audio with Kokoro TTS via ONNX Runtime, applying a pronunciation layer for security vocabulary.
• Render slides as 1920x1080 HTML/CSS using Playwright, animating element reveals in sync with narration.
• Assemble audio, video frames, captions (WebVTT) and chapter timestamps with ffmpeg, normalising loudness and encoding H.264.
• Clean up temporary files, make batches resumable, and avoid concurrent batch writes to prevent corruption.

证据

Recording 159 videos by hand wasn’t realistic, so I built a pipeline that turns lesson content into narrated 1080p videos on an ordinary CPU, with no paid services.

来源

I used Kokoro via ONNX Runtime. On an 8-core CPU it renders speech about three times faster than real time.

来源

Slides are plain HTML and CSS in the site's brand, rendered at 1920x1080 with Playwright.

来源

An ffmpeg concat list gives each frame its exact duration, the narration is loudness-normalised (loudnorm=I=-16), and the output is H.264 tuned for still images.

来源