Forum Discussion
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!
-------
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!
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 folder
4. create a new file in the folder called 'index.html'. This file can just be blank
5. Back in your storyline, create a new slide that the learner will never see
6. 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 folder
8. 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 document
function 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!
Thanks Jackson. Now I've got another problem...ugh! I'm just doing the 30-day trial and already a little frustrated. Trying to record brief audio and the audio recorder keeps freezing on me and I have to close the program in Task Manager. :(
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.
Hey
Thanks a lot; you are very helpful. I follow you, and I am learning a lot!I am no programmer, and I followed exactly your directions, but whenever I try to publish it to Review 360, I do not hear my music. Can you maybe see why?
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! :)
Thanks, Jackson. For the background song, is it possible to pause or turn the volume down?
It is working exactly fine for me. But my other user not able to listen while launching the course in google chrome. Please let me know is there any other way to resolve this>
Can you please tell me how to view this story html file for adding the background audio line of script? I am only able to view the manifest file and I do not see any <body> or <script> tags.
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 :)
Thanks so much. I used this code to have the audio run in the background and it worked great:
<audio src="jazzfrenchy.mp3" id="bgSong" preload="auto" autoplay loop></audio>
I then added this exact code as a trigger to be executed when the scene ends but it didnt work:
var player = GetPlayer();
this.Location= player.GetVar("location");
var audio = document.getElementById('bgSong');
audio.src = " ";
audio.load();
audio.play();I am in no way a coding expert. Any idea what I am missing?
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 document
function 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 document
function 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.
H
i Jackson All I can say is you are a GENIUS ! it works thank, you thank you
Jane
*Jane Jordan*
Scooore, glad it ended up working!
I'll update the example files to include this information when I get the chance :)
Hi Alexandria,
Are you able to adjust the volume prior to inserting into Storyline? You can also adjust audio you've inserted into Storyline as described here:
Click Audio Volume to change the relative volume of your audio track, then choose one of the following levels:
- Low: Lowers the volume to 50% of the original.
- Medium: Sets the volume at 100%, meaning there's no change to the original volume. This is the default option.
- High: Raises the volume to 150% of the original.
- Mute: Silences the selected audio track.
That's what I ended up doing thank you for the reply, it works well!
Hello Anne,
I am by no means a JavaScript expert however, I have been working on applying this process to one of my own courses. Based on previous conversations in this thread I was able to get it working on my own course with this code:
//load the scripts dynamically into the head of the document
function 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+"NAME OF SONG HERE.mp3";
audio.load();
audio.play();Using the code above at the JavaScript executed on the first slide has been working for me. You should be able to copy and paste it into your own trigger on that first slide. Make sure you edit the NAME OF SONG at the bottom. Additionally in your "location" trigger you only need to start at story_content. You do not need to include all of the information before that part. So the text in your location trigger should only be: story_content\WebObjects\6RU7elBBAGE
Hopefully these changes may be able to help you!
~Alex
Hi Alex,
Thanks so much for your help.
I have put your instructions into my file to try again but still not working. Just a couple of questions:
- In the location variable, should the path contain backslash or forward slashes. When I looked at Jackson's example, he had forward slash and you have back slash, so does it matter?
-
- Once I publish to get the web object number and copy to the variable, I save the file but if I publish again to play, the web object number will change, so I'm wondering if that is my problem ie. when I publish to test the audio, I am changing the web object number to the variable and therefore it is not working. If so, how do I start the project to test for the audio?
Hope I make some sense! Thanks for your help :)
AnneConfidential communication
Westpac Banking Corporation (ABN 33 007 457 141)
Westpac Institutional Bank is a division of Westpac Banking CorporationHi 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:
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-
Thanks for sharing this Jackson!
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!
Amazing! Thank you for sharing.
