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!

Pinned Reply
Luciana Piazza

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:

As a first stepI 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
Jill S

I can hardly believe it, but I did get this to work today in Chrome and IE on Cornerstone On demand LMS on a Windows 10 laptop. Today I have Version 72.0.3626.96 (Official Build) (64-bit). However yesterday I had Version 71 something. Who knows. Here are the details:

1. I'm running Storyline 360 October 30, 2018 version (due to two other bugs that I hope get fixed sometime).

2. Published using SCORM 2004 3rd edition, HTML 5/Flash. (Note: publishing with HTML5 did not work for me)

3. I opened the folder for the course in Documents>My Articulate Projects (or wherever you publish to).

4. I added my sound file (yourmusicfilename.mp3) to the root of my published course.

4. Code:<audio src="yourmusicfilename.mp3" preload="auto" autoplay loop></audio>
I added this line of code BEFORE <body> and <html> in these 2 files: index_lms.html and story.html. I used Notepad to do this. Be sure to save.

5. I added the same line of code above BETWEEN <body> and <html> in these 4 files: index_lms_flash.html, index_lms_html5.html, story_flash.html, and story_html5.html.

6. I zipped it all back up and sent to my client's Cornerstone administrator to load (this was about the 6th try).

7. Tested the course in Chrome and my music is playing through the entire course. It's also working in IE.

Before hitting Post here, I just went back to make sure I wasn't hallucinating and it still works. Somehow it is possible to make this work, in Cornerstone anyway. Good luck!

Anna Rabassó

Hi,

Does anyone know how to make the audio stop and make it start again in the next slide?

The javascript to make the audio play worked well for me:

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

But I don't know the javascript to pause it and play it again.

If anyone knows how to do it I will really appreciate it.

Thanks! 

Sabrina Ely

This post has been really helpful and I was able to get the trick to work when playing on the microsoft Edge browser. It will not work on Chrome and will not work on iphones. Has anyone been able to find a fix to this? 

My web files are uploaded to an amazon S3 account and playing from there (again fine on edge, no volume on chrome or iphone). 

OWEN HOLT

I don't believe the mobile player (iphone) supports javascript and Chrome's last security update requires a user to interact with a page before media will play. You can get around this by triggering your JavaScript to start the music when the user clicks a big "enter course" or "play media" button. *Note that this is a browser security limitation being forced on the media, it is not an Articulate software issue.

Dawn DeVillers

I am in desprate need to have music in the background throughout the course. I have tried your files and code and I can not get it to work. I am using storyline 360. someone please tell me what I am doing wrong. 

Ideally I would love to use javascript to control what slides play what music. 

thanks

dawn