Articulate Storyline is a powerful tool for creating eLearning courses, but it currently lacks native support for multiple language subtitles. Traditionally, adding multilingual closed captions requires creating separate videos for each language, which can be cumbersome and inefficient. But what if there was a more streamlined solution?
Introducing a Custom JavaScript Solution
I’m excited to share a custom solution I’ve developed using JavaScript that allows you to translate closed captions in Articulate Storyline eLearning courses into over 100 languages effortlessly. This approach eliminates the need for additional subtitle files and enables learners to select their preferred language at runtime.
Preview
With this solution, you can translate all your audio and video subtitles.
1. Set Up a JavaScript Trigger

- Go to the Master Slide: Access the Master Slide in your Articulate Storyline project.
- Create a Trigger: Set up a JavaScript trigger that will run on the timeline start of the Master Slide.
2. Insert the JavaScript Code

- Add the Code: Paste the following JavaScript code snippet into the trigger action:
- Modify the Syntax: Replace the placeholders with the appropriate values:
- Syntax:
initializeTranslation('CourseLanguage', 'Language1, Language2', 'Language3');
- Example:
initializeTranslation('en', 'es,fr,de,it,ja,ko,ru,zh-CN');
- Syntax:
3. Customize Language Options
By default, you will see all languages in a dropdown menu. You can customize the languages available in the selection box by modifying the code’s first line to include only the languages you want to offer.
Benefits of This Approach
- No Extra Files Needed: Translate subtitles without adding extra subtitle files.
- Instant Language Switching: Learners can select their preferred language at runtime and view translations instantly.
- Enhanced Accessibility: Make your eLearning courses accessible to a global audience.
Conclusion
I hope this custom solution proves valuable to the eLearning development and instructional design community. By using this approach, you can significantly enhance the accessibility and usability of your Articulate Storyline courses.
Malik, you are a true wizard!!!
I tried following the steps, but the dropdown is not showing. Am I missing a Javascript component? I am an absolute beginner so all I added is this:
initializeTranslation(‘en’, ‘es,fr,de,it,ja,ko,ru,zh-CN’);
I assume the remaining components such as CSS rules from your screenshot apply to your slide/iframe styling, not necessarily the drop down menu?
Thank you!
oh please disregard this, I figured it out 🙂
Hello Malik,
Thank you for sharing this tutorial. I tried it but I can not appear the caption. How to fix this problem ?
Contact me: mnrzmalik@gmai.com