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

Description and use

An automated pipeline using Kokoro TTS, Playwright, and ffmpeg produced 159 narrated 1080p videos for free, with captions and chapters.

Problem

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.

Outcome

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.

Workflow

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

Evidence

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.

Source

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

Source

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

Source

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.

Source