Background music for Storyline - to be published in Rise

May 27, 2020

Hi team 

I would like to have background music for a Storyline interactive. One track for the entire project and not per slide.

I've found some questions about this on this forum, but it seems that it only applies to courses being published to your Articulate projects folder. 

I need to do the same, but I need to publish it to Review 360 so I can use it in Rise. Is there any way for me to get the same result?

Would appreciate your help!

3 Replies
Sam Hill

Hi Magda, you are right in that others would have achieved this through editing the published content, and adding an audio file to the HTML file that runs the project. I see your problem that it is an integration into Rise via Review 360.

The way we did this was to include an audio file in the project (we just added the audio file to a layer on the first slide that is never shown), so that we knew it would be present when the content was published. You have to be aware that Storyline will rename the audio file when published, and so you have to publish the course so you can get that file name. In our case the file name was: 5dXUphQzy7H.mp3 (just look in your "story_content" folder).

We then added some JavaScript to our master slide that would insert the audio track into the HTML page, on timeline start:

if(document.getElementById('cba-audio-loop') === null)
{
var sound = document.createElement('audio');
sound.id = 'cba-audio-loop';
sound.controls = false;
sound.loop = true;
sound.src = 'story_content/5dXUphQzy7H.mp3';
sound.type = 'audio/mpeg';
sound.preload = 'auto';
document.getElementsByTagName('body')[0].appendChild(sound);
}

We had to do a couple of other bits and pieces to ensure the audio would play, for example, some devices would not auto play, so we added a large play button that would be shown if the audio was paused using the following JS directly after the JS above:

// determine if audio is playing
var song = document.getElementById('cba-audio-loop');
if (song.paused)
{
// get storyline player
var player = GetPlayer();
// show the big play button
player.SetVar('plybtn',true);
}

The plybtn variable is a Storyline variable, and is set to True would show the large play btn, which would contain the following JS on click:

var song = document.getElementById('cba-audio-loop');
song.play();

This discussion is closed. You can start a new discussion or contact Articulate Support.