Background Audio Cool Trick

May 23, 2016

Hi All,

Just wanted to share a way to add audio across all slides in Storyline 2 There are a few posts on here about this, and I found this method to be super simple.

**Please note that this is just a cool trick, and not a built in feature of Storyline 2.

Publish your course, open the story.html file with Notepad, scroll to the bottom and add this code

<audio src="YOURAUDIOHERE.mp3" preload="auto" autoplay loop></audio> with a space before the </body> and place your audio file into the published output folder and there you go. That is it.

Here is an example, http://bit.ly/1sy5dkV and the output folder is attached.

Have fun!

Tommy_with_Audio_across_slides.zip

Pinned Reply

Luciana Piazza
Staff

8 months ago08/22/23 at 1:26 pm (UTC)

Hello, Everyone! ✨

I'm happy to share that we have released a new update for Storyline 360 (Build 3.79.30834.0).

In this update, we have an enhancement where:

Background audio is now supported in the published video output.

As a first step, I recommend updating Storyline 360 to the latest version. Here's how:

Update Authoring Apps

If you have any questions, please let us know in this thread or privately in a support case.

Have a great day!

279 Replies

Nandhakumar S

over 4 years ago11/12/19 at 11:08 am (UTC)

Hi All,

I'm adding background music to my course. The BGM should play throughout my course continuously. So, I have used the javascript as provided in this discussion. It works well. But if I move to the next slide by clicking the next button, the BGM is starting over from the beginning. It would not start from the beginning. Need a solution to that. Can anyone help me out of this?

One more thing the next button that I used is a player default.

over 4 years ago11/26/19 at 5:13 pm (UTC)

Hey so we just need one mp3 to play as background music and loop throughout the course and play automatically when the course starts. Can you help us out? I've tried using the examples before but have not found a way that it can play automatically without user interaction. This is the song we need to play automatically and loop throughout.

kingmusic.mp3

over 4 years ago11/26/19 at 10:01 pm (UTC)

User interaction is a browser requirement. However, the user only has to interact once and then you can use that interaction to start your media.

See it in Action HERE.

My work blocks loading files to the community, however, I included the .story file (SL 360) in the course resources tab. I also included your audio file there as that is where I am playing the file from!

Jane Jordan

over 4 years ago11/28/19 at 7:53 am (UTC)

Hi where do you put the audio file?

Jane Jordan

over 4 years ago11/28/19 at 8:08 am (UTC)

Will this work if I am exporting to video?

over 4 years ago12/02/19 at 3:22 pm (UTC)

The audio file can be anywhere on the internet or a server. I add mine to the course resources so it gets published with the rest of the project and stay with them. Once I know the published path, I can use that to point to the file, update my code with the path, and republish.

Regarding publishing as a movie, I doubt this would work as JavaScript is a programming language used on the web. For music to play across a published StoryLine movie, you would need to add the "soundtrack" using any video editing software.

over 4 years ago12/02/19 at 6:10 pm (UTC)

Can you reply with the code and which file and where to insert?

over 4 years ago12/02/19 at 7:56 pm (UTC)

I'm not sure I understand your request. Do you mean the JavaScript code?

Alden Michels

over 4 years ago12/10/19 at 9:54 pm (UTC)

Following this advice ruined my project. Be sure to save a copy before you try any of this. Instructions are poor and have big risks.

over 4 years ago12/10/19 at 10:41 pm (UTC)

Following which advice? Editing the html code or integrating JavaScript?
I've never had the JS code ruin a project, however, I totally agree with the "save a back-up".
I always have (at least) 2 versions of a file at any given time. One that is an archive of the last working version (updated as things work) and a working version were I make changes.

Ren Gomez
Staff

over 4 years ago12/10/19 at 10:43 pm (UTC)

Hi Alden,

So sorry to hear your file is coming across corruption issues! I've opened a support case on your behalf to connect you with one of our support engineers to see if we help in any way.

To clarify, your .story file and your published output files are two separate items, and although we don't support modifying published output files, it shouldn't have affected your .story file in any way. It's most likely something else that's causing the corruption.

Look out for an email from support@articulate.com shortly!

Travis Jerovetz

4 years ago02/14/20 at 4:42 pm (UTC)

Hello, i have been trying to use this method as well but i cant get it to auto play. Here is a snip of the code I added:

</script>

</html>

I aslo have the mp3 added on the same level as the story.html file.

Any suggestions?

Thank you!

Dave Cox

4 years ago02/14/20 at 5:24 pm (UTC)

Hi Travis,

Why are you adding these lines to your html file?

<link rel="stylesheet" href="html5/data/css/output.min.css" data-noprefix />
</body>
<script src="html5/lib/scripts/ds-bootstrap.min.js"></script>

I suspect you don't have those paths, or those files in your project, which will cause a file not found error, or a path not found error. The script line loads the bootstrap library, which isn't needed in Storyline. The Link statement probably loads the accompanying css for that library. If you were going to use this library, you would need to load these statement before the <body> tag to work correctly.

You also have the audio section inserted after the closing body tag, </body>. You may need to move that resource into the body section of the code. (Before the </body> tag.)

4 years ago02/14/20 at 5:45 pm (UTC)

Thank you for your quick reply, Dave.

The only code i actually added was the audio file (<audio src="perspectives.mp3" preload="auto" autoplay loop></audio>). The rest of that snip was just showing placement. I tried moving that audio file to the body section but that hasn't corrected the issue.

I assume that i can add that mp3 file within the course contents on the same level as the story.html file, but for whatever reason, the audio file still doesn't play.

Ryan Carlson

4 years ago02/14/20 at 5:50 pm (UTC)

Hi, Travis, hope that someone didn't already cover this in the thread as I haven't been able to read the entire thing. If you're fairly certain you're following the instructions, it could also be that your browser is actually launching the "story_html5.html" file (as opposed to the story.html). Are you editing both of those files that are contained in the publishing storyline output?

Dave Cox

4 years ago02/14/20 at 6:06 pm (UTC)

Hi Travis,

That's interesting. I haven't seen Storyline include the bootstrap library in anything I've published so far. That doesn't mean that is doesn't though. I also haven't tried this code in the HTML5 files yet, so I'm not sure if it will still work.

One thing that I can suggest is to try this to troubleshoot:

Launch the course in your browser.
When the course loads, press F12 on your keyboard.
In the debug window, locate and display the console.
Click you browser refresh button to reload the course in the browser.
Watch the console window to see if if reports any Javascript errors.

I hope that this helps.

4 years ago02/14/20 at 6:11 pm (UTC)

That is great info, thank you! I went through the process and I do get a"failed to load resource, error not found

Ryan Carlson

4 years ago02/14/20 at 6:11 pm (UTC)

Great solutions, Dave. I can confirm from my own experience that depending on the browser, you may also have to update the story_html5.html with the same code change that is described from the OP. If you're using Chrome, I believe that's when it will do the "browser sniffing" and decide to flip over to the html5.html file. It's worth editing both of the files to ensure that's not the problem at least.

Dave Cox

4 years ago02/14/20 at 6:20 pm (UTC)

Hi Ryan,

Yes, you are correct. You do need to update the story_html5.html file as well. Unfortunately, Storyline now minifies that file, which makes it much harder to read and understand. It is doable though. The best way, is to edit the file to add some of the line feeds back in to make the file more readable. Javascript doesn't care about white-space, so this will not hurt the file. Then you can add the required code.

Hi Travis,

The error you are seeing tells you that either your path or your filename is incorrect. Since you didn't specify a path, make sure that your audio file is in the same directory as the html file. Also, take a look at the capitalization that you used for the filename. Windows doesn't care about case, but Javascript does. Make sure that your Javascript name matches the case of the file name that you see when you display it in the explorer window.

I hope that it is that simple. Good luck.

Dave

Ryan Carlson

4 years ago02/14/20 at 6:58 pm (UTC)

Ahhh. Gotcha. It's clearly been a few months since I've had to do this, so I didn't notice. haha.

4 years ago02/17/20 at 3:35 pm (UTC)

As long as you guys keep coming with “cool tricks”, they will never fix things, and you’ll have to constantly do extra work.

Jill S

4 years ago02/17/20 at 4:10 pm (UTC)

I have to agree with Gerry. Almost 4 years and 220 replies, not to mention countless hours trying to get it to work. As IDs, we are competing for the attention of people who walk around with a pocket-sized world of entertainment at their fingertips. If we can become more interesting by playing a tune through an entire (and it's gotta be short) item of training, I'll take the chance. Please Articulate, add this feature already.

Brett Grover

4 years ago03/24/20 at 5:07 pm (UTC)

So I am reaching out because like a lot of you, I can't get this to work. I got it once but had to make changes and cannot replicate. I have included the zip file for contents review. Any help would be GREATLY appreciated.