121 Replies
Sam Parsons

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

Sam Parsons

Sam Parsons said:

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


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

Jen Parks

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

Martin Dumbrell

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>

Bobbi Bailey

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>

F H

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!

F H

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.

Anthony Moser

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

Kevin Thorn

@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!