Background Audio Cool Trick

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!

185 Replies
Chris Trefz

I've used this trick before, and it was very helpful. But recently it no longer works in Chrome. Still works in IE and Fire fox though.

It sounds like it's a result of a new decision by chrome to mute autoplay adds, and my embedded audio is getting caught up in it.

Has anyone else encountered this, and have a new work around?

Christopher Kiely

Original requests for this feature go back 5 years. A couple years ago Emily finally comes up with a work around to make up for Articulate's lack of development of desired features. Then you break the work around with the new release? Frankly, someone over there isn't thinking.

Just give us the damn feature already.

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.