Turning HTML into video with Eleventy, Azure TTS, Puppeteer and ffmpeg

Preamble goes here.

How do we do it?

  1. Prepare the webpage with Eleventy
  2. Create the audio track with Azure TTS
  3. Sync up the webpage with the audio track
  4. Take screenshots of each frame with Puppeteer
  5. Turn screenshots into a video with ffmpeg

1. Prepare the webpage with Eleventy

GitHub link at this stage

2. Create the audio track with Azure TTS

GitHub link at this stage

3. Sync up the webpage with the audio track

GitHub link at this stage

4. Take screenshots of each frame with Puppeteer

GitHub link at this stage

5. Turn screenshots into a video with ffmpeg

GitHub link at this stage

6. One step further - separate narration text from body text