Background Music Demo

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

167 Replies
Jennifer Zell

Hi Jackson, I've tried several different ways to get this to work for me without much luck - I am not super experienced at code, so I am confused about what the exact code should look like, including the code to add in the music. This is what I added in, but I don't think it is correct:

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

Any help you can provide would be greatly, GREATLY appreciated!

Jackson Hamner

The reason I set up the audio.src="BrightlyFancy.mp3" was because I made this particular project have multiple songs that can be switch between. In my file I put that line into a JavaScript trigger in the .story file and used the "Execute JavaScript" trigger to switch between songs.

If you have just one song you'd like to play, you can just add:

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

To your story.html file, where "BrightlyFancy.mp3" is the name of the audio file you'd like to play.

Make sure it is located within the <Body> tags and outside of the <script> tags

Don't forget to add your audio file to the root of your output folder or else your course wont be able to find your audio file. 

 

Hope this helps! If you need to add more control over the background music (more than just having it loop through the whole course) let me know and I can help you get it working! :)

Jackson Hamner
Jennifer McCann

Thank you so much, Jackson! Would it work differently if it is published for an LMS? It works well when published for CD, but once I publish it in LMS form, zip the file, and then plug it into our LMS (Moodle), it doesn't work anymore.

 

I honestly don't know if I can help with this. I don't use Moodle, nor do I have access to my organization's LMS sandbox, so I can't test it out. My guess is that you would need to:

1) ZIP the file so its ready to go into the LMS

2) Double click the ZIP and view the contents (don't unzip!)

3) Drag the story.html file out of the ZIP window and open it in a text editor

4) Add the line that goes into the html file

5) Save it and drop the new story.html file into the ZIP window and overwrite the old one

6) drop a copy of the audio file into the ZIP window

7) Close the ZIP window and upload it to your LMS

 

I hope that is at least a little accurate and helps get it to work in the LMS. If anyone has any real experience with this and can help out it would be much appreciated!

Russ Sawchuk

A BIG Thank You, Jackson. I have a nursing course with many StoryLine components, include a separate References and Credits module. Adding background music to each slide just didn't sound right. However, your solution makes it much more professional sounding.

For anyone interested, you can see the final results here.

Thanks again,

Russ

Christie Pollick

HI, Marcee -- Unfortunately, we do not provide support for JavaScript coding, but it may be helpful to take a look at this document on JavaScript Best Practices. Please feel free to share your .story file if you would like members of the community to take a closer look.

All you need to do is use the ADD ATTACHMENT button in the bottom left corner of the reply box in the thread, and you can browse for the file from there. Please also note that if you reply via email, your attachment will not appear here in the thread. Thanks! :)

Ashley Terwilliger

Hi Marcee,

You'll need to upload all the files within the published output to your LMS to test it. Testing published content locally could cause elements of the content to fail as detailed here.  

If you're not ready for it to be live in your LMS, I'd suggest using SCORM Cloud as a testing platform as it's an industry standard for testing SCORM content.