{"id":588,"date":"2017-07-13T12:46:22","date_gmt":"2017-07-13T12:46:22","guid":{"rendered":"http:\/\/360elearning.com\/blog\/?p=588"},"modified":"2017-07-13T12:46:22","modified_gmt":"2017-07-13T12:46:22","slug":"playing-background-music-continuously-course-articulalte-storyline-2-2","status":"publish","type":"post","link":"https:\/\/360elearning.com\/blog\/playing-background-music-continuously-course-articulalte-storyline-2-2\/","title":{"rendered":"Playing Background Music Continuously in Course In Articulalte Storyline 2"},"content":{"rendered":"

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\u2019s fairly easy to extend and enhance the functionality of the built-in features in Storyline that come by default.<\/span><\/p>\n

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.<\/p>\n

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\u2019t solve the issue.<\/p>\n

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.<\/p>\n

Here are the steps to be followed:<\/strong><\/p>\n

1.<\/strong> Created a file called index.html in text editor (Notepad) and add the code <audio src=\u201d___\u201d><\/audio>.<\/p>\n

<!DOCTYPE html><\/p>\n

<html lang=\u201den\u201d><\/p>\n

<head><\/p>\n

<meta charset=\u201dUTF-8\u2033><\/p>\n

<meta name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1.0\u2033><\/p>\n

<meta http-equiv=\u201dX-UA-Compatible\u201d content=\u201die=edge\u201d><\/p>\n

<title>Music<\/title><\/p>\n

<\/head><\/p>\n

<body><\/p>\n

<audio src=\u201dFeel_Good.mp3\u2033><\/audio><\/p>\n

<audio src=\u201dMy_Presentation.mp3\u2033><\/audio><\/p>\n

<script><\/p>\n

var audio = null;<\/p>\n

parent.window.playAudio = function (name) {<\/p>\n

audio = new Audio(name);<\/p>\n

audio.play();<\/p>\n

}<\/p>\n

parent.window.stopAudio = function(){<\/p>\n

if(audio != null){<\/p>\n

audio.pause();<\/p>\n

}<\/p>\n

}<\/p>\n

<\/script><\/p>\n

<\/body><\/p>\n

2.<\/strong> Place the audio files in the same folder.<\/p>\n

3.<\/strong> Open Articulate Storyline 2. Click on \u201cINSERT\u201d tab and select \u201cWeb Object\u201d. Browse the folder location and click \u201cOk\u201d.<\/p>\n

4.<\/strong> Create a new trigger. You will see a \u201cTrigger Wizard\u201d pop-up appearing. Click on \u201cAction\u201d dropdown icon and select \u201cExecute JavaScript\u201d.<\/p>\n

5.<\/strong> From \u201cScript\u201d just below \u201cAction\u201d, write the JavaScript in the given whitespace and click \u201cOk\u201d. In \u201cWhen\u201d field select \u201cTimeline starts\u201d.
\nvar cl = $(\u2018iframe.item.webobject:eq(0)\u2019).clone();
\n$(cl[0]).css({
\n\u2018postion\u2019:\u2019absloute\u2019,
\n\u2018z-index\u2019:0
\n})
\n$(\u2018body\u2019).append(cl[0]);
\n$(\u2018.framewrap\u2019).css({
\n\u2018postion\u2019:\u2019relative\u2019,
\n\u2018z-index\u2019:1
\n});<\/p>\n

6.<\/strong> Create new trigger and set action, jump to next slide when timeline starts.<\/p>\n

7.<\/strong> Now select the \u201cSLIDE MASTER\u201d and insert buttons.<\/p>\n

8.<\/strong> Select button and create a new trigger. In \u201cScript\u201d field write the code and click \u201cOk\u201d. In \u201cWhen\u201d field, select \u201cTimeline starts\u201d. You can do the same for second button.<\/p>\n

Button 1<\/strong>
\nstopAudio();
\nplayAudio(\u2018Feel_Good.mp3\u2019);
\nButton 2<\/strong>
\nstopAudio();
\nplayAudio(\u2018 My_Presentation.mp3\u2019);<\/p>\n

Note:<\/strong>
\n1)This does not work in preview mode
\n2)This does not work in offline mode for chrome
\n3)This functionality works only when you host the course on a server<\/p>\n","protected":false},"excerpt":{"rendered":"

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…<\/p>\n

Read More Playing Background Music Continuously in Course In Articulalte Storyline 2<\/span><\/a><\/p>","protected":false},"author":1,"featured_media":587,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[176,5],"tags":[],"class_list":["post-588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aritculate","category-storyline","excerpt"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/posts\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":1,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/posts\/588\/revisions"}],"predecessor-version":[{"id":589,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/posts\/588\/revisions\/589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/media\/587"}],"wp:attachment":[{"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/categories?post=588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/tags?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}