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

4 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

Julius David Natividad

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

Wow, I'm reading a thread 3 years ago and it still works pretty well today. Thanks!

over 4 years ago05/12/19 at 8:43 pm (UTC)

I spent a good while trying to do the same thing. This will take you about an hour if you work through it, which is relatively much simpler. Not sure if this is still a problem. I've been searching all day for solutions and thought I'd share the one I finally came up with. Good luck! https://community.articulate.com/discussions/articulate-storyline/background-music-demo?page=7

over 4 years ago05/15/19 at 9:41 pm (UTC)

Hi Jill,

Glad that it worked. Did you try it on ios device? iPhone or iPad? did it work on those?

Thanks

over 4 years ago05/28/19 at 12:30 am (UTC)

This post was removed by the author

Jill S

over 4 years ago05/28/19 at 12:31 am (UTC)

Hi Naku.

I did not try on any ios devices.

Ondřej Krátký

over 4 years ago06/07/19 at 10:46 am (UTC)

Hi I have a problem with the JavaScrip solution. I use this code on the first slide:

var audio = new Audio ('podmp3.mp3');
audio.loop = true
audio.play ();

everything is OK in IE (I hear the sound)

but it doesn't work in the CHROME.

Any advice?

Thank you

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

I thought I saw something about how having audio on the first slide doesn't work? Try adding a slide before the one with the audio?

Mandana Movahedi

over 4 years ago06/12/19 at 10:17 pm (UTC)

Thank you, It was very helpful, easy to do and creative.

over 4 years ago06/13/19 at 10:08 am (UTC)

Hi Shelby, may I know how you got this to work?

Deirdre Sherman

over 4 years ago07/08/19 at 6:44 pm (UTC)

This post was removed by the author

over 4 years ago07/11/19 at 10:44 pm (UTC)

Jill,

Can you explain what "BEFORE <body> and <html>" means? The original post indicated the line of code be added after you "...scroll to the bottom and add this code with a space before the </body>" - I see one "body" reference at the bottom of my file. I take it we mean pasting the code before the reference "body" with a space between </body> and the end of the code.

Is this correct?

Dave Cox

over 4 years ago07/11/19 at 11:31 pm (UTC)

Hi Jill

In HTML, all of the code for the "body" of the page must be placed in between the <body> and </body> html tags. If you are instructed to insert code Before the <body> tag, then you should insert your code before this this tag on the code page. It doesn,t necesarily matter where before, just as long as does come before that tag.

Dave

Deirdre Sherman

over 4 years ago07/17/19 at 4:44 pm (UTC)

I was finally able to get it to work by inserting the code below into both the story.html AND the story_html5.html files. The problem now is that the background music is drowning out the VO. I used this code:

Does anyone know of a way to set the volume of the background music?

Jill S

over 4 years ago07/17/19 at 4:52 pm (UTC)

Hi Deirdre,

You will need to open your audio file with a tool such as Audacity, lower the audio level of the file itself, and then save the new file. I saved a 2-3 files until I got it right.

Todd Haynes

over 4 years ago07/17/19 at 4:53 pm (UTC)

I don't use this code because I find it to be technically buggy and the process is time consuming (hand edit code each time you publish). Instead, I've build projects with only 1 slide and a LOT of layers. Just put the background audio in your slide or a layer... The viewer has no idea the presentation is composed this way. Yes, managing that many layers has it's own issues - but when you click Publish, it works on ALL browsers and mobile devices and has no issues with LMS & SCORM integration.

over 4 years ago07/17/19 at 4:56 pm (UTC)

This post was removed by the author

Jerry Beaucaire

over 4 years ago07/17/19 at 6:38 pm (UTC)

I second Todd's suggestion. BG audio in the base layer playing in a loop and individual narration audio in each layer on top makes for a seamless and professional result.

OWEN HOLT
Hero

over 4 years ago07/17/19 at 6:50 pm (UTC)

If you use the JavaScript solution discussed multiple times in this thread, there is no need to edit the html by hand each time you publish.... and you can have full control over the volume.

over 4 years ago07/17/19 at 11:27 pm (UTC)

Hi,

I wonder how you would make this work for a traditional course with multiple lessons, quizzes, results slides, etc. How do you use only one slide with quizzes at the end of each lesson?

over 4 years ago07/18/19 at 4:56 am (UTC)

Hi Deirdre Sherman,

That was my problem too when I tried this trick.
The easiest way for me to do, that time, is to manually edit the background
music.
I just used free software to do it and it worked fine.
I hope this helps.

Thanks,
David

David Natividad
Instructional Designer
Pearson People Services

Pearson Management Services Philippines, Inc.
7F North Tower, Rockwell Business Center
Sheridan corner United Street, Mandaluyong City, PH 1552
Mobile Number +63 922 8654739

Learn more at pearson.com

[image: Pearson]

Jerry Beaucaire

over 4 years ago07/18/19 at 3:39 pm (UTC)

For me, the need to use layers for a consistent BG music track doesn't actually continue to the quiz, I like for the audio to change when something really different is onscreen. So the quiz at the end of a layered scene could be on a slide of it's own with its own special "thinking" music background.

After the quiz/knowledge check is over, we start the next layered scene.

Edward Jassin

over 4 years ago07/24/19 at 3:20 pm (UTC)

Hi All, If I am using the below JavaScript to play an audio file for background music, what would I need to do to make sure it loops continuously?

Using SL360...not working when I edit code <audio src="YOURAUDIOHERE.mp3" preload="auto" autoplay loop>

var audio = new Audio('jazz1.mp3');
audio.play();

Ryan Carlson

over 4 years ago08/16/19 at 6:52 pm (UTC)

This is a great solution, but is there anyway to add something that would allow he pause/play button to actually pause the background music too? OTherwise, it works great even when publishing for xAPI.

Karine Morrissette

over 4 years ago08/29/19 at 9:31 pm (UTC)

does it work with Storyline 360?

Darin Fennell

over 4 years ago09/03/19 at 6:40 pm (UTC)

Emily,

This looks like a great idea that is simple to execute. Unfortunately, I am not able to get it to work for me. Any help would be greatly appreciated. BTW, I am using Storyline 3 on a Windows 10 computer.

MusicPlaying.zip