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

Hi Marcee, Since opening the html document is causing you problems I would suggest going with the Version 2 option. 1. Create a variable in storyline called 'Location'2. Create a folder on your desktop, it can be called whatever you'd like. 3. Put all of the music files you want to play in your course in this folder4. create a new file in the folder called 'index.html'. This file can just be blank5. Back in your storyline, create a new slide that the learner will never see6. Create a web object in that slide and link it to the folder you just created with the blank index.html file in it. Make sure to set the web object to load automatically. 7. Publish your file (dont zip) and open the output folder8. Check under story_content/WebObjects folder and copy the name of the web object folder in there. It will be a series of random characters like 'W7auf51LmL'9. In storyline set default value of the 'Location' variable to the path whole path 'story_content/WebObjects/[web object name]'10. Create a trigger that executes javascript when your project starts. 11. paste this javascript into your trigger, it will edit the story.html file for you: //load the scripts dynamically into the head of the documentfunction add_line() { var line = document.createElement("audio"); var head=document.getElementsByTagName('body')[0]; line.type = "audio/mp3"; line.src=""; line.id="bgSong" ; line.autoplay = true; line.loop = true; head.appendChild(line);}//but we only want to add these once!if(document.getElementById('bgSong')==null){ add_line();var audio = document.getElementById('bgSong');audio.volume = 0.5;} 12. Now you can play your songs with a trigger like this: var player = GetPlayer();this.Location= player.GetVar("location");var audio = document.getElementById('bgSong');audio.src= location + "SONG1.mp3";audio.load();audio.play(); remember to change 'SONG1.mp3' to whatever the music file you added was named. You can adjust the volume (for narration or sound effects or whathaveyou) with this trigger var audio = document.getElementById('bgSong');audio.volume = 0.6; That should get it working for you, let me know if you run into any more problems!

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

Hi Jane, It is possible to stop the music and resume it while the video is playing. If you execute this javascript trigger it will mute the music: var audio = document.getElementById('bgSong');audio.volume = 0.0; and to resume the music: var audio = document.getElementById('bgSong');audio.volume = 1.0; The file you shared is actually the zipped output file, what I need is the test_background_music.story file. The file that you open in Storyline to edit the course is the file I need. I cannot open any zip files into Storyline.

If you want to stop the song you can run this trigger at the end of the scene or beginning of the next scene. var player = GetPlayer();this.Location= player.GetVar("location");var audio = document.getElementById('bgSong');audio.src = " ";audio.load();audio.play(); This will set the song to nothing, so it wont play anything. If you want to change the music use the same trigger and set audio.src to loctation + the name of your song. You can control when and what song is playing throughout the course. I hope this helps! Let me know if you need any assistance getting it to work :)

Hi Jane, sorry it took so long to respond: I had never considered the returning to course or jumping around the menu! I think that the easiest way to get around this is to drop the javascript triggers into the slide master so they run on every slide in the background. The problem with that though, is that if it runs on every slide then the song will restart every time the trigger fires. BUT I think there is a way around this! So firstly, any of the javascript triggers you are using should be pasted into every slide master main page that you use in the course. That way no matter where the learner jumps in the music should continue start playing. Secondly, we're going to need to edit the javascript so that it checks to see if there is already music playing before starting this song. This will help us avoid the problem of the song restarting every time the trigger runs. You'll want to change this: //load the scripts dynamically into the head of the documentfunction add_line() { var line = document.createElement("audio"); var head=document.getElementsByTagName('body')[0]; line.type = "audio/mp3"; line.src=""; line.id="bgSong" ; line.autoplay = true; line.loop = true; head.appendChild(line);}//but we only want to add these once!if(document.getElementById('bgSong')==null){ add_line();var audio = document.getElementById('bgSong');audio.volume = 1.0;}var player = GetPlayer();this.Location= player.GetVar("location");var audio = document.getElementById('bgSong');audio.src=Location+"SONGNAMEHERE.mp3";audio.load();audio.play(); To this: //load the scripts dynamically into the head of the documentfunction add_line() { var line = document.createElement("audio"); var head=document.getElementsByTagName('body')[0]; line.type = "audio/mp3"; line.src=""; line.id="bgSong" ; line.autoplay = true; line.loop = true; head.appendChild(line);}//but we only want to add these once!if(document.getElementById('bgSong')==null){ add_line();var audio = document.getElementById('bgSong');audio.volume = 1.0;}var player = GetPlayer();var audio = document.getElementById('bgSong');this.Location= player.GetVar("location");if (audio.duration > 0 && !audio.paused) {// If song is playing and not paused then do nothing}else {audio.src=Location+"Happy.mp3"; audio.load();audio.play();} This should check if the audio is playing or not, and if not then it will load the song again. I haven't tested this yet and unfortunately I can't get around to it until later this week probably, so this is just a theory so far. I hope that it works though! Let me know if there's any problems with this and I can try to help as much as I can.

Background Music Demo | Articulate

pyxipyx
Community Member
7 years ago
Thanks for sharing this Jackson!
Great job, its working perfectly.
WilliamHuang
Community Member
7 years ago
Hi is this thread still alive? I implemented Jackson Hammer and it works great on the PC but it doesn't work on the iPHone .. not in Safari or Google Chrome.
WilliamHuang
Community Member
7 years ago
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.
LubnaThabseem-1
Community Member
6 years ago
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.
pyxipyx
Community Member
6 years ago
Hello and thanks Jackson for this great example,
is there a way to play the music at the loading of the course without clicking on any button ?

thank you for the response !
- BrianAllen
  Community Member
  6 years ago
  pyx, take a look at this support article and let us know if it answers your question: https://articulate.com/support/article/Storyline-and-Studio-HTML5-Audio-Won-t-Play-in-Google-Chrome-66-and-Later
pyxipyx
Community Member
6 years ago
Thank you Brian for this support article, it helps to understand the problem.
Will_Findlay
Community Member
6 years ago
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.
- pyxipyx
  Community Member
  6 years ago
  Hi Will,
  the index.html and the mp3 files are included in the web object that is inserted on the .story,
  so when you publish the course it creats a folder (\story_content\WebObjects\....) that contains the index.html and the mp3 files.
  
  Hope that answers your question.
Will_Findlay
Community Member
6 years ago
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.
AndersonRumuy
Community Member
5 years ago
LMS or scorm cloud does not support Background Music using Javascript.

Anybody have the same problem?

already tried many times and that is my conclusion.

or maybe someone have others way to run Background Music for Uploading to LMS?
BrettGrover-769
Community Member
5 years ago
All,

So I am reviewing the steps and screenshots of "How to add Background music) and it is not working for me. This post appears to be over 4 years old so I am reaching out to see if there is an easier/faster way of doing this with Articulate Storyline 360? Please help!
- LaurenConnelly
  Staff
  5 years ago
  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!
  - AlvaroAviles
    Community Member
    4 years ago
    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!!