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!

248 Replies
Fred Good

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:

<audio src="NAMEOFYOURAUDIOFILE.mp3" preload="auto" autoplay loop></audio>

---
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:

<audio src="NAMEOFYOURAUDIOFILE.mp3" preload="auto" autoplay loop></audio>

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

Kim Boggs

HELP Please.  I cannot get this code to work.  I have added it as explained above, but the music will not play.  I added the mp3 file to the published file location.  attached is a pic of the HTML code and also my file.  thanks for any help you can provide.

Leslie Ng

Hi I have added the code in the story_html5 and uploaded onto our LMS (SuccessFactor). However, the BGM doesn't seem to be working. Apart from that, everything runs smoothly.

I have then remove the code and added in the index_lms_html5 and it worked. But it is not allowing the LMS to record completion. The system is unable to mark complete although all slides are visited. Any other solution on this?

 

Regards

Leslie

Brigid Naglich

I'm able to save my file as html5, added the code for seamless audio in notepad, and can hear the audio. Once I upload the file to AWS, the audio is fine. Once I add the link to Canvas, the audio no longer plays. I'm working on Mac Parallels, not sure if that's part of the problem?

Appreciate any feedback, thanks -

Fred Good

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:

<audio src="NAMEOFYOURAUDIOFILE.mp3" preload="auto" autoplay loop></audio>

---
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:

<audio src="NAMEOFYOURAUDIOFILE.mp3" preload="auto" autoplay loop></audio>

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