Multiple Closed Captions and Languages using simple Javascript

Mar 06, 2020

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

Multiple_CC_js.story

13 Replies

Lauren Connelly
Staff

4 years ago03/09/20 at 1:17 pm (UTC)

Hi Brandon!

We really appreciate you taking the time to share this workaround! What an incredible build. I'm sure this is going to be a saving grace for many!

Hillary Robinson

over 3 years ago08/04/20 at 9:17 pm (UTC)

Thank You!!!

ALINA MACELARU

over 3 years ago08/21/20 at 8:45 am (UTC)

Hi Brandon,

Have you found a way to make this work for layers too?

Raymond Guarnieri

3 years ago02/09/21 at 10:44 pm (UTC)

Brandon, as much as I wanted this to work, there's two issues we're running into attempting this.

1. The "making the audio layers the same length" aspect of this is still glitchy... i.e. we do this down to the exact fraction of a second length of the video layer and still the other CC layers blip in behind the parent layer from time to time.

2. This is not scalable for a company like our that has thousands of training modules- all video based, each with several languages to display.

If you have furthered your work on this project, I'd be extremely grateful for any additional thoughts you may have.

That aside, Articulate really needs to make this a built in feature.

Paul Wijnen

3 years ago04/16/21 at 11:05 am (UTC)

A solution without javascript could be as follows.

Create a var "language"
create a language selection slide that sets that var to a specific language
on each video slide you can place the same video with different language captions on different layers and show a certain video layer depending on the chosen language (so make a condition that checks the var)
It looks like you have duplicates of the video, but when you check your storyline publish (story_content), you will notice it will only use 1 video file for all the languages.

example.png

Vimal Reynolds

almost 3 years ago06/22/21 at 5:29 pm (UTC)

Thank you to both contributors for er... contributing. I am trying out both methods. We have a huge need for multiple captions in our company, and we have thousands of courses. Wish it was built-in.

deborah rivera

over 2 years ago08/25/21 at 6:21 pm (UTC)

Can anyone clarify if this is possible over the slide elements itself? I.e. not just videos?

Shobit Dabral

almost 2 years ago04/20/22 at 8:40 am (UTC)

@Raymond Guarnieri Right!

The JavaScript solution is buggy as the layer of other CC keeps popping in between and sometimes on replay it also don't work properly and random language CC appears.

Not a good solution if you are thinking to implement.

You can even test the published sample shared by the post author and check as its not working properly.

Articulate should provide a way to integrate this feature in future updates.

Michael Murphy

almost 2 years ago07/11/22 at 5:53 pm (UTC)

Can one SCORM package have 5 different languages in the Closed Captions - so one video module has 5 different languages to chose from in the Closed Captions?

over 1 year ago08/04/22 at 8:03 am (UTC)

If you want 5 languages then yes, you just have 5 blank audio tracks, with each track containing a subtitle for a different language.

Alessandro Pagano

1 year ago01/31/23 at 6:12 pm (UTC)

Unfortunately this solution is not working appropriately.

As @Shobit Debral says the JavaScript solution is buggy as the layer of other CC keeps popping in between and sometimes on replay it also don't work properly and random language CC appears.

It doesn't work properly even if you change the tab on the browser and then continue the viewing.

It needs another workaround!