Multiple Closed Captions and Languages using simple Javascript

I cracked the code! 

Well, my manager and I did it together so, I can't take full credit but needed to share with my fellow StoryLiners.
TL;DR - SL File attached.
We added very simple Javascript at the beginning AND you only have to add it once! 
Very important steps/Instructions are as follows:

  • Inspired by this thread - You have to kill the captions from the video file. You probably have to initially do your captions on the video file to time it with the audio waves. Just export it (for translation) then delete the captions.
  • You then add a blank audio file - the easiest way to do this is just record 1-2 seconds of audio right in SL, edit, cut out the recorded audio and then manually add however amount of silence to match the length of your video.
  • Once you translate the exported captions file, import it to your blank file. In my case, I captioned english first so the first blank file was easy - Just imported the english caption. Import/export for the rest of the languages. IMPORTANT - you must use the same timing. If not, you will see the different languages, with the different timing, peeking behind the CC bar. I will elaborate on that in a sec.
  • When you stack your language files on the timeline, you have to do it in the same order across all slides. The DOM reads the audio file's captions from bottom to top on StoryLines timeline. This also matches the Javascript on the first slide. Ex:
    • If English is the first language (blank) audio file, that will be nth-child(1) in the Javascript.
    • If Spanish is the second language (stacked on top of the english file in the timeline) that will be nth-child(2).
    • Etc...
  • The first block of Javascript is used if the user goes back to that slide and picks a different language - for some reason(?). It "kills" any other instances of Javascript by removing the "children".

The reason for the importance of using the exact timing when translating from your original caption file, is that the Javascript is hiding the children that were not selected behind the child that you selected. Its weird, I know. And it does not matter if the length of the caption bubble is different across the languages.

Tested in Chrome and firefox. Hope this helps some projects/deadlines! We've all been there and if you haven't, "You will be... you will be" (in the voice of Yoda).


3 Replies