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

Ashley Terwilliger-Pollard
Staff

over 6 years ago09/25/17 at 2:08 pm (UTC)

Hi Wilson,

Emily's original code does not work in SL3/360 based on changes made to the publishing engine, but you may want to take a look at the example shared by Owen earlier to use the Javascript. I linked back to one of his examples here.

Mandana Movahedi

over 6 years ago09/25/17 at 5:59 pm (UTC)

This is great! Thank you for sharing.

over 6 years ago09/26/17 at 2:44 pm (UTC)

Thanks for the update.

Phil Whitehead

over 6 years ago10/16/17 at 3:15 pm (UTC)

This works great locally but when I upload it to Tempshare for testing the music is gone.

Does anyone have any ideas why it wouldn't work? Thanks

Ashley Terwilliger-Pollard
Staff

over 6 years ago10/19/17 at 5:06 pm (UTC)

Hi Phil,

I haven't heard that the music goes missing in Tempshare - does the rest of the course play normally? How did you publish it, with HTML5 included or not?

Flor Anthony De La Pena

over 6 years ago11/06/17 at 12:56 am (UTC)

Hi Emily, this was so helpful! I do know html and js but I dont know how to deal with this storyline. So thank you so much. For reference, if you cant make it to work in chrome try it in microsoft edge or IE cause chrome doesnt work to me either. Cheers!

Ashley Terwilliger-Pollard
Staff

over 6 years ago11/06/17 at 1:45 pm (UTC)

Thanks Flor for that update - glad you found this resource helpful!

Sindy Chettiath

over 6 years ago11/17/17 at 9:04 pm (UTC)

This is awesome!! Worked perfectly for a system video demo I built. We decided against voice over and simply wanted instructions on the screen and background music this was an excellent work around! Thank you so much for the post!

Tony Sundell

over 6 years ago11/28/17 at 9:30 am (UTC)

I haven't been able to find a work around this issue. I'll post this as a feature request and I recommend anyone needing this in their work do the same.

Todd Haynes

over 6 years ago12/08/17 at 5:45 pm (UTC)

I tried the JS solution, but found it too cumbersome and worried about support for SCORM and our LMS. So, my solutions so far are to 1) use Storyline 360 and build everything in 1 slide with an imported audio file and then develop all the content in a TON of layers, or 2) use different product like Captivate or Camtasia.

over 6 years ago12/08/17 at 5:52 pm (UTC)

I've used the JS solution on Sl1, SL2, and SL3 without any issue when publishing to web or using scorm on our lms. I don't find it to be cumbersome at all.

What would be cumbersome to me would be building an entire course on one slide!

Ken Angeles

6 years ago01/22/18 at 9:45 am (UTC)

I was able to have it work in my project. The issue that I encounter was that the audio narrations added on each slides are not playing. Would you happen to have a workaround on this?

Ken Angeles

6 years ago01/22/18 at 10:04 am (UTC)

This works perfectly on my project. Thanks! My problem now is that the audio narrations per slide are not playing. Would you happen to have a workaround?

Ashley Terwilliger-Pollard
Staff

6 years ago01/22/18 at 4:24 pm (UTC)

Hey Ken,

Sorry to hear you're having trouble with this, and I saw you mention it in another older discussion too. Can you share a copy of your .story file here so that folks can take a look? That'll be the best way to get help for this custom audio set up!

6 years ago02/03/18 at 12:21 pm (UTC)

Hi - I am noticing that inserting the code <audio src="Summer_Smile.mp3" preload="auto" autoplay loop></audio> works beautifully when I play the course in IE but does not play in Chrome. Did I miss the instructions in this thread? any suggestions?

Thank you!

KS Meyer
Reply Deleted

6 years ago02/05/18 at 5:09 pm (UTC)

Thank you Matthew. You are awesome!

KS Meyer
Reply Deleted

6 years ago02/06/18 at 6:16 pm (UTC)

Matthew, one more question please

I used the code modifications and the background music plays great. Is there a way to get the music to stop playing after say 6 minutes if it is added to the html files?

Thanks again!

KS Meyer

6 years ago02/06/18 at 6:43 pm (UTC)

All this talk about Background music, wondering folks find free background music?

Any suggestions?

Thanks

Brande Morrison

6 years ago02/27/18 at 2:17 pm (UTC)

I know this is an old thread, but wondering if this works for anyone on SL3? Our LMS uses the index_lms_html5.html file, and that's where I added the code (before the closing <body> and <html> tags). It works if I click on the file from my published files/folders, but not once put out on the LMS.

OWEN HOLT
Hero

6 years ago02/27/18 at 3:59 pm (UTC)

I use SL3 and SL360 and have found the JavaScript solution to work well with our LMS.
It worked with my prior employer who used Saba and with my current employer using Learndot.
Link to details

6 years ago03/21/18 at 2:16 pm (UTC)

This post was removed by the author

Anna La Mont

6 years ago03/29/18 at 12:12 pm (UTC)

Hi,

I am upgrading to Soryline 3 and this really cool trick does not work for me any longer.. The script now looks different when opened with Notepad, and I don't know where to paste the <audio src="YOURAUDIOHERE.mp3" preload="auto" autoplay loop></audio> ..

6 years ago03/29/18 at 2:08 pm (UTC)

This post was removed by the author

Fred Good

6 years ago03/29/18 at 2:11 pm (UTC)

Hello Anna,
I use SL3 and I got this to work, but I had to struggle a bit to learn how to do it. Here's what I did:

Note that when I would publish it created a folder that contained many files, two of which we will focus on:

story.html
and
story_html5.html

---
1. In your story.html file, open it with notepad (or your favorite html editor) BEFORE (NOT BETWEEN) the </body> and </html> tags, place this code snippet:

---
2. In your story_html5.html file, open it with notepad (or your favorite html editor) BETWEEN (NOT BEFORE) the </body> and </html> tags, place this code snippet:

***I made sure to put a space and a hard return after the code snippet, as was instructed in the original post, and that appeared to help.

---
3. Make sure to put the mp3 file in the folder at root level (meaning in the same folder as the story_html5.html file). Make sure the file name of the mp3 matches the name in the code precisely!

I hope this helps! I haven't had a chance to see how it works after loading onto our particular LMS, but so far it works in previewing and the output files are working for me! :) Good luck!