Background Audio Cool Trick

Hi,

I am upgrading to Soryline 3 and this really cool trick does not work for me any longer.. The script now looks different when opened with Notepad, and I don't know where to paste the <audio src="YOURAUDIOHERE.mp3" preload="auto" autoplay loop></audio> ..

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!

Hi, I need the background music to work on iPAD. I tried the solutions published here and none of them works on Safari which is the iPAD browser.

Does anybody knows why and what should I do to make it work?

Thx, Miri

Does anyone know if this is an option that is offered in storyline 360 or are we required to implement a similar work around?

Hi Sindy,

It's not built in to Storyline 360 yet, but I do see that Owen shared here the solution that worked for him in Storyline 3/360.

I'm unable to hear sound once I've published and added to AWS. The audio works fine in preview. I'm also working on a Mac (Parallels), not sure if anyone else has run into issues?

Your issue might be chrome disabling auto-play without the user 1st interacting with the page.

Do they need to have a button that starts the music? Not sure how to fix - is there a way to override Chrome disabling the auto-play?

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.

I think maybe you need to put the code snippet BEFORE (not BETWEEN) the </body> and </html> tags? *Since you're showing the story.html code not the story_html5.html code

I did try that and got the same result. 

Hmmm... is it not working in more than one browser? 

We only have IE here. However I just tried HTML5 and it is working.  I will have to see how that works in our LMS now. 

Gotcha. My next suggestion was going to be to make sure you placed your audio file into the published output folder (this is where I goofed), but you said you've done that... hmmm... 

Update.  I got the audio to play in the HTML 5 output.  Now, I am trying to figure out how to get the music to fade at certain points to allow for narration in the presentation.  Any java code experts for this one?

Ooo, I gotta tap out here... :D lol I'm not the java script expert you're looking for! Good luck! Please post your results if you can, as I would love to know how you accomplish that!

Hi Brigid,

There isn't a way to override the autoplay behaviors Chrome set up, but you'll want to review the information here on what will happen with your courses. 

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

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 -

Thanks for the sharing.

QQ: Is this code working fine in Storyline 3 as well.  I find challenge to work it out in Storyline 3. 

Attached is the HTML5 file.

Help!

hi

how insert background music in storyline3?

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!