Playing Background music across all slides - Storyline 360

Hi all, 

I know there have been a few threads on this but I can't seem to find a solution!

I'm creating a project which I need audio for, but I would like the audio to run throughout the whole project and not just restart on each slide. I've tried adding the code that a girl called Emily mentioned a while back and putting the audio into the published folder (

<audio src="Ecom-Soundtrack.mp3" preload="auto" autoplay loop></audio>

</body>)

I added it to story.html and story_html5.html but this didnt work, whenever i upload to my LMS I get an error message.

 

Can anybody help? this is driving me insane!

 

 

37 Replies
Ned Whiteley

Hi Dawn,

It sounds like you are getting a bit overwhelmed by it all, so I have tried to put it in simple steps below.

1.  In order to set up your audio file in the Resources tab do the following:

a.  Click on the Player button on the ribbon bar at the top of the screen.

b.  Click on Resources at the top of the Player Properties dialogue box and then the Add button (looks like a folder) at the bottom left.

c.  Select the File option in the Add Resource dialogue box and browse to the location of your audio file and select it.

d.  If necessary, edit the Title for the audio file and click Save.

 

 

e.  Select the Features tab in the top left and then click the Resources check box:

 

 

This will place a Resources tab in the top bar of the Player when your SL project file runs.

A copy of your audio file will now be saved as part of your SL project and, when you publish it to the web, it will appear in the external_files folder, which, as I mentioned in my previous post, will be found inside the story_content folder.

2.  To set up your javascript trigger (for the sake of this example, I am assuming your audio file is called "my audio file.mp3"):

a.  amend your js as follows:

var audio = document.getElementById('bgSong');
audio.src="story_content/external_files/my audio file.mp3";
audio.load();
audio.play();

Your other js looks okay, so you should only need to change the code for the trigger that loads and plays the audio.

3.  The final part is to publish your project to the web and then give it a try.

If you don't want to have a Resources tab on the screen when users are viewing your course, this will have to be done slightly differently. However, if you follow the instructions above, you will be able to prove that the audio is working as you want it to. The adjustments that then have to be made will be quite straightforward, so don't worry about it.

Hope this helps.

Dawn H

Thank you so much! I do know how to add a Resources element in the player. The only thing in your excellent and much appreciated guidance below is when you mentioned “publishing to the web”. I’ve been publishing to the LMS (we use the rise.com LMS) because that’s where my eLearning will be accessible to my users. Does not publishing to the web negate the process? Or do I have to do something different to make all of this work if I’m publishing to LMS?

Many thanks,

Dawn

Get Outlook for iOS

CONFIDENTIALITY NOTICE: This transmission (including any attachments) contains information which is confidential and/or subject to the attorney-client or work product privilege, and is intended solely for the recipient(s) identified above. Any interception, copying, distribution, disclosure or other use of this transmission or any information contained in it is strictly prohibited, and may be subject to criminal and civil penalties. If you have received this transmission in error, please immediately reply via e-mail, and then delete the transmission from all forms of storage and destroy all hard copies.

Dawn H

Hi Owen,

I wanted to update you on something. Whichever solution works by playing background audio no longer works with the latest Google Chrome browser! Which is my company’s default browser! My IT dept worked on this for me and they could get your solution to work in Firefox but not Chrome. Apparently Chrome now blocks background audio!

So, I wasn’t quite as inept as I thought! 😉

Dawn Horner
Sr. Director, Sales Training
dhorner@coherus.com

333 Twin Dolphin Drive, Suite 600
Redwood City, CA 94065
Office: 650.395.0236
[logo]

Dawn H

Hi Ned,

I wanted to update you on something. Whichever solution works by playing background audio no longer works with the latest Google Chrome browser! Which is my company’s default browser! My IT dept worked on this for me and they could get Owen’s/your solution to work in Firefox but not Chrome. Apparently Chrome now blocks background audio!

So, I wasn’t quite as inept as I thought! 😉

Dawn Horner
Sr. Director, Sales Training
dhorner@coherus.com

333 Twin Dolphin Drive, Suite 600
Redwood City, CA 94065
Office: 650.395.0236
[logo]

CONFIDENTIALITY NOTICE: This transmission (including any attachments) contains information which is confidential and/or subject to the attorney-client or work product privilege, and is intended solely for the recipient(s) identified above. Any interception, copying, distribution, disclosure or other use of this transmission or any information contained in it is strictly prohibited, and may be subject to criminal and civil penalties. If you have received this transmission in error, please immediately reply via e-mail, and then delete the transmission from all forms of storage and destroy all hard copies.

OWEN HOLT

It actually still works on chrome. However, you have to have the user interact with the page 1st before executing the JavaScript to start the music. In the example below, the music starts playing when you click either of the puzzle pieces that you can move.

https://360.articulate.com/review/content/f8f8411d-262b-4e99-8067-cd1d60139304/review

In other words, once you interact with the page, the browser will allow media.

Dawn H

Hi Owen,

To be clear, I honestly can’t say which solution my IT could not get to work in Google Chrome, but they also said there was chatter about it in a Google Forum as well. Regardless, I’ll keep trying and hopefully one day soon these work-arounds will be moot.

Thanks again!

Dawn Horner
Sr. Director, Sales Training
dhorner@coherus.com

333 Twin Dolphin Drive, Suite 600
Redwood City, CA 94065
Office: 650.395.0236
[logo]

Ned Whiteley

Hi Dawn,

I can concur with Owen as I did have this problem initially, but simply forgot to mention it, so my apologies.

The simple solution is to have a Start Course button that appears when the first slide comes up (perhaps it can fade in for effect or something similar) and once the user clicks on that, the first interactive element of your slide is triggered, whether it be a new layer or a voiceover that you originally had set to trigger when the timeline started for the slide, for example.

Not only does this now start your course rolling (something that users won't find unusual as Start Course buttons are frequently used in E-Learning), but it will also act as the initial interaction with your slide before you execute the javascript to play your audio. To the user, this will appear seamless.

With my recent project, I have got round this by giving the user a choice of background music. Their action of selecting the music is what triggers the whole process.

Dawn H

Thank you, Ned! Very much appreciate the additional info!

Get Outlook for iOS

CONFIDENTIALITY NOTICE: This transmission (including any attachments) contains information which is confidential and/or subject to the attorney-client or work product privilege, and is intended solely for the recipient(s) identified above. Any interception, copying, distribution, disclosure or other use of this transmission or any information contained in it is strictly prohibited, and may be subject to criminal and civil penalties. If you have received this transmission in error, please immediately reply via e-mail, and then delete the transmission from all forms of storage and destroy all hard copies.

Elke Moyer

I created my slides I wanted to have music across all of them. Then I saved it as a video. Then I started a new project and pulled my video that I had created into the new project. That video is now on just one slide. I added my music and it plays across all the slides that I wanted the music to be on. Its easy to do if you don't need any interaction and you can have all the slides just automatically play  and saved as a video.