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

182 Replies
Christie Pollick

Hi, Jane -- Unfortunately, as it appears you replied via email, your image/screenshot did not come through to the thread. From within the thread itself, all you will need to do is click on the 'Insert an Image" icon (highlighted in the screenshot below), or you may use the ADD ATTACHMENT button in the bottom left corner. Hope that helps! :)

Jackson Hamner
Jane Jordan

Hi Jackson

FYI when I use google chrome to view the project I am getting this message

*'The custom Java script feature on this slide while viewing locally
because your browser does not support it'*

​Does this mean it will play when loaded to LMS do you know?

Cheers
Jane​

Leslie is correct, that error means that you are trying to load the JS from your local computer, which chrome doesnt like doing. It should work on your LMS since that will no longer be a local environment.

Ryan Granville

As I said above I used your code Jackson and it worked great.  But do you have an idea on how I could use the built-in pause control to have the music pause as well? (with your code only the slides pause when user click on the built in pause button but not the music).

 

Thanks in advance!! Ryan

Jackson Hamner
Ryan Granville

As I said above I used your code Jackson and it worked great.  But do you have an idea on how I could use the built-in pause control to have the music pause as well? (with your code only the slides pause when user click on the built in pause button but not the music).

 

Thanks in advance!! Ryan

 

 

I don't think there is a way to add a trigger to the player's play/pause button. The only way to have both actions triggered with the same button is to make a custom button for it. What would probably work is to have a button that has the trigger "Pause timeline when user clicks" as well as a "Execute Javascript when user clicks" trigger.You would want the javascript to mute the music (I haven't found a good way to pause audio for real), so this code should work:

var audio = document.getElementById('bgSong');
audio.volume = 0.0;


And when you want it to play again have the button execute another script that sets the volume back to normal:


var audio = document.getElementById('bgSong');
audio.volume = 1.0;


Here is a topic about making a custom play/pause button. Just add the scripts to the button triggers and it should work. https://community.articulate.com/discussions/articulate-storyline/pause-play-button-question

 

Let me know if you run into any problems, I hope this helps!

Ryan Granville

Thanks a lot for your answer Jackson! Your solution would provide a great workaround which I could indeed implement if I did not need the seekbar. As I need it and there is no way(that I know of?) to have only the seekbar without the play/pause button I would prefer not to have 2 play/pause button.

Christie Pollick

Glad you found the answers you needed, Ryan!

I also wanted to stop in to note for anyone who is considering using JS as an option and may not already be aware, unfortunately, we are not able to provide support for JavaScript coding.

Luckily, we have lots of community members like Jackson and others who are more than willing to share their expertise to assist! And here is a sheet on JavaScript Best Practices for those who'd like to check it out. :)

Virak Yang

This is a really brilliant demo, Jackson. Thank heaps.

But I have a project that will have the sound of Guitar, paino and vocal on the same slide. I want them to play together. But how can I use Jackson's script to adjust the volume of each audio?

var audio = document.getElementById('bgSong');
audio.volume = 0.0;

I've never coded, so I don't really know how to make this work

Any help would be much appreciated?

Thanks,

 

Virak

Lindsey Innes

Great article Jackson!!! I was able to add one song and it now plays on loop, which is exactly what I was hoping to do. I have voice overs on this module, so I would like to lower the volume of the background music. I see that you have shown this in your demo (attached below), but I am just wondering if you can show exactly where these lines need to be inserted in HTML.

Thanks so much.