Background Music Demo

Mar 24, 2015

Jackson Hamner
By Jackson Hamner

I made a demo featuring background music that goes through the whole course (doesn't change from slide to slide). The user can chose from four songs to listen to and can adjust the volume, and the song continues playing through every slide and loops when it completes. I've also added instructions on how to make this work to the module.

I don't know whether someone else has already posted something like this (I couldn't find anything), but hey if so here's one more!

 Demo

-------

I've put together a second demo that shows a different way to do this. This second version performs the same actions as the first one, but without needing to edit the output files every time you publish! It saves a lot of headaches when you need to edit something in the course because now you don't have to drop the music files into the output folder and you dont have to edit the html file every time you publish!

Demo 2

I've also attached the second version .story file. Its called Background_Music_Version_2.story.

If anyone needs help getting either versions of this to work I'm more than happy to assist :)

201 Replies
William Huang
over 5 years ago11/16/18 at 9:13 pm (UTC)

So here is the problem.  This method doesn't work on Safari because Safari doesn't support volume control from javascript.  See https://www.ibm.com/developerworks/library/wa-ioshtml5/wa-ioshtml5-pdf.pdf.  I think the best way for use your code to play mp3 files with volume set to 1 (max volume) , and encode the desired volume using editing the audio file.    Eg. 3 versions of the mp3 loud, medium and soft, and just switch files when you use the volume slider.

Lubna Thabseem
5 years ago02/07/19 at 4:42 pm (UTC)

Hi, Jackson, 

Is it possible to have the background music play across layers, if I wanted to add interactivity in the middle of the video?

I'm creating an animation that has the same audio continue across multiple layers on a single slide. I want to add a button feature on one of the slides without interrupting the animation on these layers. At the same time, I want the button to take the user to a certain layer. Is this question clear? 

I'd really appreciate your help. 

Thanks,

Lubna. 

Will Findlay
almost 5 years ago06/20/19 at 2:28 am (UTC)

I downloaded the Background_Music_Version_2.story example file, and published and tested it and was flabbergasted to find that it worked! How is that possible when all I had was the .story file and hadn't set up additional folder with the mp3 files? Are the mp3 files being pulled into the .story file somehow? 

I just can't figure out how this is working when I never set up the additional folder with the index.html file and the mp3 files.

Will Findlay
almost 5 years ago06/20/19 at 1:37 pm (UTC)

Thanks pyxi! I think what surprised me is that when you point to the WebObject folder on your local drive, it is actually importing that folder INTO your .story file. 

Here is how to verify this: If you change the extension of your .story file to .zip you can explore the content of the project. Double click the zip, and navigate to this folder:

...\your_story_file_changed_to.zip\story\media\

In the folder, you will find a file that ends in .bin. This is a binary file (noneditable) that contains the items that were in the folder you pointed to when inserting the Web Object. 

Stefan K.
over 4 years ago08/19/19 at 11:56 am (UTC)

Thanks four your input! It works for me! Just one question:

It only works for me, if the trigger for point 12 deals with "If user click on...". When I set up the trigger e. g. "When timeline reach sec 2, than execute javascript", it does not work. Is this normal?

See below.

 

 

Anderson Rumuy
over 4 years ago12/31/19 at 1:44 am (UTC)

Hi Alex,

After tried this code, I thought there is a better way to add background music

I think manny of us also use this methode so I prefer this one because more simple

Edit the output of Course Publish and add this JS:

<audio src="1.mp3" id="bgSong" preload="auto" autoplay loop></audio>

1. Right click on the html5 & open with Notepad or Notepad ++ 

2. add this js into html5 output right between the <body> and <!-- 360 --> like this picture below: 

Can Edit via Notepad or Notepad ++

3. Save & exit

And don't forget :

1. to change the "1.mp3" to your audio file name. Mine is 1.mp3

2.paste "1.mp3" into the publish output folder where you edit the hmtl5

-Anderson-

Lauren Connelly
4 years ago03/24/20 at 12:30 pm (UTC)

Hi Brett!

Since this post is dated, Jackson might not be subscribed anymore. You could always reach out to Jackson using the "Contact Me" button in their profile.

Secondly, I'm looking at the previous comments and this seems to be a workaround for having continuous music throughout the course. Since this isn't something we currently support, I'm going to let our community members chime in!

ioulia Kornberg
4 years ago03/25/20 at 9:03 pm (UTC)

I know this is a VERY old post but I'm trying to do the same with no luck.  

Please note that I don't know anything about coding, I'm just following instructions!

I am publishing to LMS using SCORM 1.2.  I tried to add this Javascript (see bold)

</head>
<body style="background: #282828" class="cs-HTML theme-unified">
<audio src="NAMEOFFILE.wav" id="bgSong" preload="auto" autoplay loop></audio>
<!-- 360 -->
<script>!function

I'm still getting NO audio.  Anyone have any thoughts?

ioulia Kornberg
4 years ago03/26/20 at 9:47 pm (UTC)

Hi Jackson,

I know this thread is old, but I followed all the steps using this page and also Mark Sperman's YouTube video which walks you through all of your steps above (see: https://www.youtube.com/watch?v=qLjbm4Qgunk).

Unfortunately, it's still not working for me.

I am sharing my Storyline 360 source file here. Would you be able to take a look to see what is wrong?

Let me also ask if I was supposed to do anything different besides publish the course as normal to LMS using SCORM 1.2?  I did that, but no audio plays when I preview it, or when I double-click story.html. I even published it to my LMS, and still nothing.

Alvaro Aviles Hernandez
3 years ago02/05/21 at 9:00 am (UTC)

Hi Lauren, 

I just saw your post saying to contact Jackson, but "contact me" option is no longer in his profile...

I tryed to contact you too but doesn´t work eather..

I hope you can read this email.

Jackson´s Demos doesn´t work any more... and I was wondering if you can give me any tip to set up Audio volume control?

Audio is working on my entire project, but it has a pretty high volumen...

 

Thank you so much!!

Ren Gomez
3 years ago02/10/21 at 6:57 pm (UTC)

Hi Alvaro,

Thanks for reaching out, and I'm sorry you didn't get a response from Jackson! If you're able to share your file with our support team here, they'll be able to test your file and provide steps on adjusting your volume!

In the meantime, one quick tip is to check the quality settings when you're publishing the course. If the Optimize Audio Volume box is checked, it will normalize all of the audio. Uncheck that box, and let me know if that improves the experience!

Sign In to Reply