Example With A Typical Workflow

My typical video editing workflow starts with audio and ends with visuals. Coding videos are no different.

Once you have your voiceover, you want to timestamp the audio to match your keyframes.

For example, if I want to explain how variables in Javascript works, I could use 3 animations:

• One at the start to display the topic of the video
• A second one to showcase the Javascript syntax
• And a last one to explain the const keyword

Say the first part starts at the beginning of the video, I’ll assign the value 0 to the start attribute of the first animation:

{
    "name": "test",
    "animations": [
        {
            "type": "add",
            "lines": "// HOW TO USE VARIABLES IN JAVASCRIPT",
            "start": "0",
            "end": "1"
        }
    ]
}

I’ll match the next animations with the corresponding parts in the audio:

{
    "name": "test",
    "animations": [
        {
            "type": "add",
            "lines": "// HOW TO USE VARIABLES IN JAVASCRIPT\n\n",
            "start": "0",
            "end": "1"
        },
        {
            "type": "add",
            "lines": "let x = 0\n\n",
            "start": "3",
            "end": "4"
        },
        {
            "type": "add",
            "lines": "const Y = 2\n\n",
            "start": "6",
            "end": "7"
        }
    ]
}

If the audio lasts longer than 7 seconds, I might want to repeat the last frame until completion. To do so, I just add an empty animation to match the duration. If the video is 9 seconds long, I assign 9 to end:

{
    "name": "test",
    "animations": [
        {
            "type": "add",
            "lines": "// HOW TO USE VARIABLES IN JAVASCRIPT\n\n",
            "start": "0",
            "end": "1"
        },
        {
            "type": "add",
            "lines": "let x = 0\n\n",
            "start": "3",
            "end": "4"
        },
        {
            "type": "add",
            "lines": "const Y = 2\n\n",
            "start": "6",
            "end": "7"
        },
        {
            "type": "add",
            "lines": "",
            "start": "8",
            "end": "9"
        }
    ]
}

My coding visuals now match my audio without needing additional editing: I can just directly import it into my video editing software.