How to play background music continuously throughout the course in Articulate Storyline 2.

Articulate Backgound
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>.

reated a file called index.html in text editor

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

audio files

Step 3

Open Articulate Storyline 2. Click on “INSERT” tab and select “Web Object”. Browse the folder location and click “Ok”.

INSERT tab and select web object

Step 4

Create a new trigger. You will see a “Trigger Wizard” pop-up appearing. Click on “Action” dropdown icon and select “Execute JavaScript”.

Trigger Wizard

Step 5

From “Script” just below “Action”, write the JavaScript in the given whitespace and click “Ok”. In “When” field select “Timeline starts”.

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

trigger

Step 7

Now select the “SLIDE MASTER” and insert buttons.

SLIDE MASTER

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.

Timeline starts

Button 1
stopAudio();
playAudio(‘Feel_Good.mp3’);
Button 2
stopAudio();
playAudio(‘ My_Presentation.mp3’);

Note:

1)This does not work in preview mode
2)This does not work in offline mode for chrome
3)This functionality works only when you host the course on a server

Click below buttons to see how it works.

 

4 replies
  1. Masoud
    Masoud says:

    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

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *