background music in Storyline

Hey Andy,

Sorry to jump in here. Just wanted to repost Kenny's code:

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

I had to add some additional spaces so it would show up properly. 

I hope this helps :)

Christine

Hi. I'm also interested in adding background music to a slide with several layers. The layers are animated like a slideshow (with fade in/fade out animations), but I want the background music to continue across all layers. The only way I have been able to do this is to break the sound up and add it to each layer, but it's choppy... I'm very new to storyline so appreciate any hints if there is a way to make this more fluid.

Thanks!

Step to add background music:

1. Publish your story first

2. In the output folder, open story.html with notepad and edit the HTML code as below:

    2a. First, find the coding -

    2b. Add new coding underneath as follows:

    2c. Change the  "yourmusicfile.mp3" to your mp3 file name

3. Save the story.html

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>

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

HI Widya, it is not possible to have a track play across all slides as in presenter.  You can have a track play across a single slide

What if you put the audio on the slide master? Would that work for playing music across slides in Storyline?

Welcome to the community, Ian!

Here's his entire post (I modified it again, so hopefully it will all show up):

Step to add background music:

1. Publish your story first

2. In the output folder, open story.html with notepad and edit the HTML code as below:

    2a. First, find the coding -

    2b. Add new coding underneath as follows:

    2c. Change the  "yourmusicfile.mp3" to your mp3 file name

3. Save the story.html

I hope this helps :)

Have a great day!

Christine

The music file has to be saved in the same folder as the story.html folder. The way the code is written, the file is looking for a audio file in the same folder as the html file.

You can at least a display the sound on a slide, so when you create layers, the sound can still be played. This can be used for nice effects as well.