Easily Import Subtitles to After Effects With JSON

Motion Designer Remco Tent Details How You Can Import Subtitles SRT Files Like Footage in After Effects.

Wouldn’t it be ideal if you could import/link the SRT file into your library like you would with other kinds of footage? As it turns out, since the CC2018 update where it’s possible to import JSON files for data-driven animations you now can. Netherlands based Motion Designer Remco Tent has been searching for a practical and hassle-free solution to generate subtitles for a while now, and with AE’s ability to import and use JSON files, he has found it. Remco Tent describes the process and technique himself:

THE ISSUE:

For a while now I’ve been searching for an easy way to add subtitles to my After Effects files. I know there are a few different ways to use free and “paid” extend scripts but the ones I’ve found all ended up with having hard-coded keyframes. When you’ve made some manual changes to your subs in AE, and there were some last-minute changes to your subs you either had to do the corrections manually or re-run the script with the new sub and re-do all you manual (formatting) changes.

Wouldn’t it be ideal if you could import/link the SRT file into your library like you would with other kinds of footage?

THE ANSWER:

you can!

Since the CC2018 version of AE, you can import JSON files to create data-driven animations. Well, isn’t a JSON file basically just text? So this got me thinking; “what if I tried importing an SRT file instead of JSON?”. As it turns out, if you omit the file mask in the import file dialog (All files (*.*)), you can in fact import *.srt files. Using

footage(“filename.srt”).sourceText

As an expression on a textLayer’s Source Text if showed the (complete) contents of the SRT file. All I had to do now is parse the contents, get the in-time, out-time and the actual sub and have it all displayed at the right time. Mind you, I’m not a programmer so there might be a better, more efficient, prettier looking solution than this, but here’s my working solution:

var subFile = “sub.srt”;

var lines = footage(subFile).sourceText.split(‘\n\r\n’);

for (n = 0; n < lines.length; n++) {
if (time >= srt(lines, n).start && time < srt(lines, n).end) {
sourceText = srt(lines, n).sub;
break;
} else {
sourceText = “”;
}
}

//————————————
function srt(lines, i) {
origin = lines[i].split(‘\n’);
ID = parseInt(origin[0]);
startText = origin[1].match(/^[0-9][0-9]:[0-9][0-9]:[0-9][0-9],[0-9][0-9][0-9]/)[0].replace(“,”, “:”);
endText = origin[1].match(/\s[0-9][0-9]:[0-9][0-9]:[0-9][0-9],[0-9][0-9][0-9]/)[0].replace(‘ ‘, ”).replace(“,”, “:”);
var subtitle = “”;
for (var j = 2; j < origin.length; j++) {
subtitle = subtitle + origin[j] + ‘\n’;
}
return {id:ID, start:parseTime(startText), end:parseTime(endText), sub:subtitle};
}

//————————————
function parseTime(str) {
hours = parseInt(str.split(‘:’)[0]);
minutes = parseInt(str.split(‘:’)[1]);
seconds = parseInt(str.split(‘:’)[2]);
millisesconds = parseInt(str.split(‘:’)[3]);
t = (hours*60*60) + (minutes*60) + seconds + (millisesconds/1000);
t = Math.round(t*100)/100;
return t;
}

You simply place the above expression in the Source Text property of a TextLayer and replace “sub.srt” with the name of your imported subtitle file.

Like The Posts on LesterBanks?

Ensure You continue getting the most relevant tutorials, news, insights, and industry techniques by becoming a patron!

2 comments

  1. Rene

    I have been looking for a solution like this for years – thank you!

    I had some problems with the import part. (couldnt really figure out what to do with this part footage(“filename.srt”).sourceText). Whatever I did I received some kind of error.

    But in the end I found two ways around the problem. I have posted them here if anyone else has the same problem.

    1: Choose Import file
    2: Change view to All Files (*.*)
    3: Change Format to Javascript
    4: Select file and click Import

    1: Rename the file to filename.json
    2: Choose Import file
    3: Select file and click import

    Both ways around seem to work. Dont know if they will cause other problems.

    -1
  2. Jesper

    Hi Remco
    Any chance that you could provide a work file? I can’t make it work (I have read René’s comment). Thanx in advance.
    Jesper

    -1

Comments are closed.