background music in Storyline

Hey all, 

So I want my background music to play from slides 1.9 to 1.11.  Is there anyway that you're aware of to set the parameters for when the slide music plays in the background?  

Could I separate it out into its own scene and then set the scene as the background music?  I suppose I could set this content to auto-advance and manually select the time of the music clips, however I wonder if the transition from slide to slide would feel choppy and weird.  

Any thoughts?

Thanks! 

Sam

Looking for the same.  This is a basic function and should be added by developers in future releases.

Pretty please.

Thank you.

Sidenote - I did what I mentioned and set the slides to auto-advance, and then just edited the background music to match the VO length, added fade outs / ins, and it's "okay".  however, it would be better if the music didn't stop between slides.  

Thanks, 

Sam

Hi Joel and welcome to Heroes!

If you'd like to see this feature in new editions feel free to share your thoughts here in the form of a feature request. 

Sam.,

Thanks for sharing the method you came up with to set this up! 

Hey everyone - this is great! I was pleased to find a solution. I have gotten it to work by updating the code as in an earlier post. However, I have two questions/issues:

1. When it's playing in the browser, if I pause the Storyline piece, the background music continues to play. Is there any way around this?

2. The volume is a bit high on the music as compared to my voiceover. Is there anyway to code in the level of the volume of the background music? Or would I need to edit the sound file somewhere else first (to lower volume)?

Thanks,
Jen

Jen - can you send me instructions so I can figure this out? I have the snippet of code to use but I cannot tell where to insert it in the story.html file?

Also - does my mp3 file sit in the main root folder or in the story_content folder?

In the previous posts, find the code...... is blank.

What code are you referring to?

I would also like some guidance on this please?

Jen - Where did you put the code (Christine mentioned earlier) in your html file?

So at least two have figured this out but not shared their solutions. Thanks

I need this solution. Please repost the hole code. I dont know where to put this:

I found an easier way

Add the following code in the file story.html before the final </body> tag

<audio src="1.wav" preload="auto" autoplay loop></audio>

Where "1.wav" is the name of the audio file you want to use. The file must be in the root
directory with story.html

This will cause the file to loop throughout the presentation.

e.g.

<audio src="1.wav" preload="auto" autoplay loop></audio>

</body>
</html>

Martin,

SWEET!!! I saw this post and even though it's not something I need at the moment, I thought I would give it a try... and it worked beautifully!  Thanks for sharing this info!

Just a reminder to users that the audio file that they are using should be dropped (saved) in the story_content folder and the code should include a reference to this location, such as:

<audio src="story_content/1.wav" preload="auto" autoplay loop></audio>

The only thing missing from your repost is where to put the code... I put right after the < /head > and it worked. Thanks Heroes!

Thanks for sharing Alan!

Hey Sarah!  I realize you posted this over a year ago, but I thought I'd chime in nonetheless (and hopefully you've figured this out by now!)

When you build a layer, you can click on the gear to the right of the layer name.  This opens the properties menu for that layer.  From here, you can de-select the option that says 'Pause Timeline of Base Layer.'  This will allow your audio to continue to play as your user advances through the layers.

I hope this is helpful!

Hey Sam! Depending on how you want to build your presentation, you can build it with layers rather than slides.  If you do this, you can set your layer properties so they do not pause the base layer when they play.  This will allow music on the base layer to continue to play as your users advance through the layers.

Thanks Fletcher for coming back around to this! It always helps as other users may stumble upon it and appreciate your help. :-) 

I have ran into this problem as well - I like the coding idea and will be trying that. But as of now, I slice my music to fit each slide.  You know each slide length by the time line, so cutting the music to mach is easy. Now, if this is a presentation and is meant to play with no back button, then no issue. If there is a back button then the sound or audio will restart at the slice made for that slide.  The question i have with the coding is if you click the back button for a slide will the music start over? I would think that it should play being it is coded as a loop. 

ANT

Martin Dumbrell, your solution worked for me like a charm (in Storyline v2), and I am sooo happy you posted the code!!!

Chuck

@Anthony, when the music is looping in the background it's running off the story.html file so all your slides within the course will hear the music continuously regardless of navigation direction.

Thanks to Kenny, Rizah, and Martin for sharing code examples. There are several coding examples to accomplish this. I recently used a different approach form another thread here. In that thread, Alexandros shared screenshots of where the code goes in the story.html file.

Additionally, depending on user's browsers, Firefox doesn't handle MP3 files rather, OGG files.  Here's the latest breakdown:

• MP3 for Chrome, Safari, IE9 and above
• OGG for Firefox
• WAV for Opera

Here's the code Alexandros shared in the other thread that I've used a few times and works great with some limitations. Note: limitations are due to the world of browser compatibilities.

<audio id="control-volume" preload "auto" autoplay loop autobuffer>
  <source src="yourmusic.mp3" />
  <source src="yourmusic.ogg" />
  <source src="yourmusic.wav />
</audio>

Add this code to both story.html and story_html5.html (if part of your output). Place all three audio file formats in the root of the output directory (same location as story.html and story_html5.html). The "control-volume" piece in the above code is tied to Storyline's Player volume control button. However, only works in HTML5 only. From Alexandros:

"I have now managed to merge the background music volume to the stock players Volume Button, but it works in HTML5 only."

Here's a recent example I did: Interactive Video with continuous background music. The music plays and loops continuously during the length of the output regardless if you interact with the video or not and regardless if the main player's timeline ends.

Note: My design does not have the volume control player button activated. The code works either way and even via the Articulate Mobile App Player.

I *just* finished the above project last week. It's on the calendar to post a more thorough explanation and deconstruction of how to assemble. For now, just know the above code works in this type of design...and well, enjoy!

Thanks Kevin for sharing another example here! 

I am glad I could help, Chuck !  It was a life saver for me, too.

Martin, 

I followed your instructions and they were the only ones that worked for me while trying to put the background music across all the slides in a Storyline. Thank you very much! :~)

Glad to hear it Elisa! Thanks for sharing :)