How to play background music continuously throughout the course in Articulate Storyline 2
Articulate Storyline 2 provides the flexibility to customize interactivity to the max with minimal efforts. This web based authoring tool gives feasibility to add JavaScript which can be of great help to take your eLearning courses to the next level. It’s fairly easy to extend and enhance the functionality of the built-in features in Storyline that come by default.
We came across a challenge in one of our courses developed for a Registered Training Organization (RTO). The course content was presently in simple form without voice-over. The audience were between the age group of 20-30 years and to keep the content attractive client wanted to add a background music.
If we embed the music in individual screens then upon every next click, the music starts from beginning. Even the audio in Master slide didn’t solve the issue.
We have overcome this limitation and customized it with the help of JavaScript. After following the below instructions you can play single audio file throughout the course.
Here are the steps to be followed:
Step 1
Created a file called index.html in text editor (Notepad) and add the code <audio src=”___”></audio>.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Music</title>
</head>
<body>
<audio src=”Feel_Good.mp3″></audio>
<audio src=”My_Presentation.mp3″></audio>
<script>
var audio = null;
parent.window.playAudio = function (name) {
audio = new Audio(name);
audio.play();
}
parent.window.stopAudio = function(){
if(audio != null){
audio.pause();
}
}
</script>
</body>
Step 2
Place the audio files in the same folder.
Step 3
Open Articulate Storyline 2. Click on “INSERT” tab and select “Web Object”. Browse the folder location and click “Ok”.
Step 4
Create a new trigger. You will see a “Trigger Wizard” pop-up appearing. Click on “Action” dropdown icon and select “Execute JavaScript”.
Step 5
From “Script” just below “Action”, write the JavaScript in the given whitespace and click “Ok”. In “When” field select “Timeline starts”.
var cl = $(‘iframe.item.webobject:eq(0)’).clone();
$(cl[0]).css({
‘postion’:’absloute’,
‘z-index’:0
})
$(‘body’).append(cl[0]);
$(‘.framewrap’).css({
‘postion’:’relative’,
‘z-index’:1
});
Step 6
Create new trigger and set action, jump to next slide when timeline starts.
Step 7
Now select the “SLIDE MASTER” and insert buttons.
Step 8
Select button and create a new trigger. In “Script” field write the code and click “Ok”. In “When” field, select “Timeline starts”. You can do the same for second button.
Button 1
stopAudio(); playAudio(‘Feel_Good.mp3’);
Button 2
stopAudio(); playAudio(‘ My_Presentation.mp3’);
Note:
- This does not work in preview mode
- This does not work in offline mode for chrome
- This functionality works only when you host the course on a server
Our Services: Powerpoint to eLearning, Flash to HTML5 Migration, eLearning Service Provider
Hi, I need to test it but I don’t own a server, may I try it on something like ScormCloud or TempShare ?
https://blogs.articulate.com/word-of-mouth/get-your-storyline-projects-online-with-tempshare/
Do I need to put the WebObject in the ZIP after?
Hi Alexandre,
Yes, it works on ScormCloud or TempShare.
You only need to add the WebObject with Storyline.
Hello, how can I write a JavaScript code that creates random numbers from one to ten so that by clicking on a button, this JavaScript command does not repeat the code that it generates, for example, if it shows three for the first click, in the next click three are do not be shown. thanked
Here is the link to one of our blog which should answer your requirement.
https://www.swiftelearningservices.com/random-numbers-in-articulate-storyline-3/
Would this work if the deliverable needs to be launched in MindTickle (we can only add a zipped SCORM file in MindTickle)?
Dear Luisa,
Thanks for posting your comment.
Yes, after making changes as per the blog steps output file can be hosted on your MindTickle platform.
Hopefully you have followed the steps described on the blog.
If you need any further information/ support then please let us know.