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

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

281 Replies

Emily Ruby
Author

8 years ago07/26/16 at 1:14 pm (UTC)

Hey Wendy,

I am not sure of a way to have this loop only on selected slides. This method will loop it through the entire course. I am only just beginning to dive into learning these kind of tricks, so hopefully someone else in the community may know of a way to do this.

If I do stumble across a way to achieve this, i will share an update here.

SCOTT SARE

8 years ago07/26/16 at 4:34 pm (UTC)

Create a Slide Trigger and Execute JS in the slide you want to activate the audio in Storyline. In the slide trigger you can set when the audio file will start, i.e. by user interaction, timeline, cue, etc. The audio will play from that moment fwd regardless the number or types of slides placed afterwards. There may / not be a way to adjust looping or volume control, but I have not looked into it yet. I just tested this and it worked much in the same way as the html audio scr trick mentioned above except you can set when its to begin. You must Publish the module to test this feature - it does not work in Preview.

Add Script:
var audio = new Audio('audio_file.mp3');
audio.play();

Add *.mp3 File:
Place the audio file in the same location as the story.html file.

Pros: You can control when and how the audio will begin playing in Storyline.

Cons: As is, the volume control switch in Storyline will not control the volume of the audio file (Shazbat!) so it will either need to be adjusted using an unrelated program prior to publish or with additional script - if it exists.

Enjoy and good luck. Ja.

Leslie McKerchie
Staff

almost 8 years ago07/28/16 at 8:11 pm (UTC)

Thanks for popping in to share your solution as well Scott :)

Amy Esposito

almost 8 years ago08/05/16 at 3:40 pm (UTC)

anyone know if there is a way to adjust the volume on background audio

Rosy Colelli

almost 8 years ago08/09/16 at 9:45 am (UTC)

This post was removed by the author

Rosy Colelli

almost 8 years ago08/09/16 at 9:48 am (UTC)

Hi Tiara!

The audio, for all project works (on PC). I used the suggested code (in Htlm and htlm5 files). Unfortunately, it does not work on iPad or iPhone. If I launch the file htlm5 from my PC there is the music; while, on the iPad there isn't. Any suggestions? Thanks!

Rosy Colelli

almost 8 years ago08/09/16 at 9:49 am (UTC)

This post was removed by a moderator

Rosy Colelli

almost 8 years ago08/09/16 at 11:36 am (UTC)

Thank you very much Matthew!

Rosy Colelli

almost 8 years ago08/09/16 at 11:44 am (UTC)

Sorry Matthew; I put the button, but does not work ... maybe the code in HTLM5 files I change it? Thanks :)

Milene Below

almost 8 years ago09/15/16 at 9:57 pm (UTC)

Hi Emily- you're a lifesaver! This worked for me. Thanks so much!

Emily Ruby
Author

almost 8 years ago09/16/16 at 2:09 pm (UTC)

Glad this helped Milene!

Milene Below

almost 8 years ago09/16/16 at 10:01 pm (UTC)

I noticed the music doesn't play when opened on a mobile phone. Do you know if I should just add the music mp3 file into the mobile folder within the published file? Or do I need to add the code you have above somewhere else? Do I follow the HTML5 instructions listed above for the mobile part to work?

Leslie McKerchie
Staff

almost 8 years ago09/19/16 at 3:10 pm (UTC)

Hi Milene!

Did you see Matthew's response above? Check it out here.

Milene Below

almost 8 years ago09/19/16 at 9:14 pm (UTC)

Yes, I've read some of the posts, but didn't quite understand what I need to do?

Rosy Colelli

almost 8 years ago09/20/16 at 7:39 am (UTC)

Hi Milene.

The audio isn't playing on iPad or iPhone due to iOS restrictions that prevent audio from autoplaying in mobile Safari.

Unfortunately. I've tried different ways. But it's all the same.

Sara Davies

almost 8 years ago09/26/16 at 5:05 pm (UTC)

I got this to work beautifully, but not in Chrome - it plays the music but never starts the course. (It plays fine in IE and Firefox). It doesn't sound like anyone else has had this issue, but wondering if anyone has any suggestions? I'm including code for both .mp3 and .ogg in the html.

Ashley Terwilliger-Pollard
Staff

almost 8 years ago09/26/16 at 6:50 pm (UTC)

Hi Sara,

I haven't heard of that but know there is a recent change to Chrome and how it plays the local Flash playback of content. Could you be running into that issue or had you uploaded this to the intended environment to test it?

Leslie McKerchie
Staff

almost 8 years ago09/26/16 at 6:53 pm (UTC)

Hi Sara!

I know Matthew addressed this previously in this thread. You can hop right to his response here.

almost 8 years ago09/26/16 at 6:55 pm (UTC)

Hi Ashley,

Thanks for your reply. I think that may have been the issue - when I was playing from my local drive it didn't work, but uploaded to a server it did. In any case, seems to be OK now.

Thanks again!

Sara

almost 8 years ago09/26/16 at 6:56 pm (UTC)

Hi Leslie, thanks for that link. That wasn't the issue, I had the code in the right place. But trying to play it from a local drive (rather than a server) was (I think). In any case it works from the new location.

Thanks!

Sara

Leslie McKerchie
Staff

almost 8 years ago09/26/16 at 6:57 pm (UTC)

Oh, great news Sara :) Thanks for the update. Glad Ashley was able to assist.

Milene Below

almost 8 years ago10/04/16 at 7:01 pm (UTC)

I'm back.....again! From previous discussions, I realize the background music does not play on an iPad or other device with iOS. I understand that and will live with it. Here's my other dilemma. The background audio trick works for me in the local drive, but when I transfer the published folder to a web server, I noticed the background audio doesn't play when I click the story.html link. Any thoughts?

Leslie McKerchie
Staff

almost 8 years ago10/04/16 at 8:40 pm (UTC)

Hi Milene! You are uploading the content to the server and viewing from that location as your learner would? Viewing locally after uploading may cause issue. I would check out Ashley's solution above as well.

Milene Below

almost 8 years ago10/05/16 at 1:43 pm (UTC)

Basically, I am publishing the content to my local drive, adding in the music script, etc. I then place the published folder in our public network drive (S:drive) for our IT folks to upload to our Intranet web server. When clicking the story.html file from the S:drive, it doesn't play the music. For kicks and grins, I placed the music code in the sotry_html5.html folder and when I click on that, it plays. We tried linking to that file on the web server but all it does is play the music and we get a blank display.