background music in Storyline

So is this still not a standard feature in SL2?? 

Hi Ashley,

It's  not a feature in Storyline 2 - although you can always share your thoughts on features here. 

For what it's worth, I tried and then modified the code a bit to successfully get the audio.mp3 to play as a background track. Sad part? I would not play in FireFox.  So...back to the drawing board.

Here is the code I used. I only included the <DIV> tag in my example so you would know where in the story.html file I put the <EMBED> tag. See the following.

<EMBED SRC="05 Sensual Sophis-Ti-Cat.mp3" AUTOSTART=TRUE LOOP=TRUE WIDTH=1 HEIGHT=1 ALIGN="CENTER">
</EMBED>
<DIV id='divEmail' style="position: absolute; width: 10; height: 10; left: 10; top: 10; visibility:hidden" ></DIV>

<DIV id='divWebObjects'></DIV>
</body>
</html>

Thanks Doug for sharing some of the code you're using here - and I hope you're able to figure out a way to get it to work in Firefox. 

Oh, wow. This is such a basic funcitonality. Captivate has done this for years! I may now be regretting buying this product. :-(

Hi Michael,

Background music and playlists are a functionality of Articulate Presenter, but not Storyline. As you'll see in this thread there are a few different ways to accomplish it so hopefully one of those assists you and here is another thread with an example you may be able to use. 

Hey Kenny,

The solution works but the audio does not loop. What could possible be wrong? Please let me know. This is the bode I entered before </body>

<embed src="riding_a_bicycle21.mp3" autostart="true" loop="infinite" width="2" height="0">
</embed>
<noembed>
<bgsound src="riding_a_bicycle.mp3" loop="infinite">
</noembed>

Thanks,

Hima

Hi Hima! Hopefully Kenny is still subscribed to this thread, but if not, please reach out directly via the 'Contact Me' option on the user profile.

If anyone still needs help with adding background music to play throughout a course, this works for me.

- After publishing your course, open the html5 file in a text editor

- In the code look for the end of the body section.  Look for the closing body tag </body>

- Just before this put in this audio code

<audio autoplay loop>

   <source src="yourmusicfile.mp3" type="audio/mpeg">

</audio>

- Save it and then you should be good to go

Thanks Andrew for sharing here. 

Does the background music pause or mute when you use the player controls?

I don’t think it will, but I’m not using the volume control or pause in my project so I’m not sure.

Hi Andrew,

Just an FYI that responding via email includes your signature here, and you're welcome to edit the post to remove that information if you wish. 

Thanks Ashley!

I got it to work to play and pause with the volume control.  If you feel comfortable working with the published code, I can walk you through it.

Hey Andrew, I use this background method often but not tied to the player volume control. Would be interested to learn what part of the code you're tweaking.

Hi Andrew,

I am interested to know how to make the background music to work with the
players controls to mute and stop and reduce volume.

Regards,
Hima

It's not a perfect solution, but it works for the right course.  I basically turn the player volume control button into a play/pause button for the background music.  Then if you want to control the volume for the course narration or sound effects you could build another volume control button on the slides themselves.  Or users can just control their computer volume.

So here's the best I've come up with:

1.  Open the story_html5.html file

2.  In the audio tag give it an "id".  You can give it whatever id name you want(I just chose "bg-music").  So the audio tag would look something like this:

<audio autoplay loop id="bg-music">

   <source src="yourmusicfile.mp3" type="audio/mpeg">

</audio>

3.  Find the volume control.  The code looks like this:

<div id="control-volume" class="controlbar-button compact"><a class="icon volume half"></a></div>

Notice it already has an id of "control-volume"

4.  Before the end of the <script> section, look for the </script> tag.  Add in this bit of code:

var volume = document.getElementById('control-volume');

volume.onclick = function toggleAudio() {
var theAudio = document.getElementById('bg-music');
if (theAudio.paused) {
theAudio.play();
}
else {
theAudio.pause();
}
}

Basically what this is does is create a function that turns the volume control button into a play/pause button.

5.  You also need to open the player.css file to change some styling to remove the volume slider. You may not have to actually change all of these, but just to be safe I did.  You can play around with it a little if you want.

- Comment out or delete:

.controlbar-button.compact.volume-open

and

.volume-handle

- Change display to "none" for:

.volume-slider

and

.volume-open .volume-touchpad

and

.volume-open .volume-slider

Its not as much of a hassle as it may look.  Let me know if there any problems or if someone has a better solution.

Thanks for popping back in to share with the curious minds Andrew :)

Good stuff Andrew!

I'll play around with this approach as soon as I can, but have a couple questions: 

What did you do for the Volume button icon?

The volume button may function as a play/pause button yet also confuse visual behaviors when the expected icon is for volume is a speaker, whereas the icons for play/pause are the standard triangle for play and double-vertical bars for pause.

Have you found anything in the .css to point to or assign a different icon to that control?

Great stuff Andrew. Not the exact solution for my case but I am sure it's going to help me a lot in future.

I left the volume icon as is.  The effect of playing/pausing the background music vs muting it, is pretty much indistinguishable to the user.  A play/pause icon may be more confusing for the user, because they may associate that with playing/pausing the course.

Good point. So essentially your method is a volume On/Off button for background music. Yet, by doing this negates any further use of that button for course volume such as audio narration?