Music Background is not working in Scorm Cloud
Hi everyone,
I am using this JS code to adding music background:
1. On File Publish Output story_html5: adding this code
<audio src="your audio file name.mp3" id="bgSong" preload="auto" autoplay loop></audio>
2. On Storyline Trigger--> Execute javascript when time line start:
var audio = document.getElementById('bgSong');
audio.src="1.mp3";
audio.load();
audio.play();
so the Audio will load automatically when the course start
after that I am also use this JS code to get the volume control via Dial using code from Owen Holt :
1. on Storyline trigger -->execute javascript when Variable changes:
var player = GetPlayer();
var level = player.GetVar("Volume")
var audio = document.getElementById('bgSong');
audio.volume = level;
the Variable is "Volume" number.
After all set done, I publish to SCORM 1.2, & it work perfectly fine.
the Problem is
Before I upload to my company LMS, I try to upload into SCORM Cloud to test it, and sadly the audio background doesn't works
I have a few guesses:
1. Some JS doesn't supported by SL3 if publish to LMS or Scorm cloud doesn't supported it, perhaps my Company LMS too
2.Before I Zipped the output before upload to Scorm Cloud, I have to add again "your audio file name.mp3" into zipped file because after I zipped it the audio file is missing. Is this methode could be the reason?
Really Appreciate for people who would like to take a peek & give solution
Regards,
Anderson
5 Replies
It might just be the modern browser security settings getting in your way. You might need to add an "enter course" slide or a "play button"; anything that requires the user to interact with the browser. Change your javascript to run when that interaction happens rather than at timeline start. Note that this is a recent browser requirement and not a SL limitation.
See if that solves your issue.
Hi Owen,
wow the expert first
Thanks for your respond
I already tried to changes it as you suggest & it still doesn't work
here is the storyline file, maybe would you like to see if there is something wrong there.
See my suggestions below
1. O̶n̶ ̶F̶i̶l̶e̶ ̶P̶u̶b̶l̶i̶s̶h̶ ̶O̶u̶t̶p̶u̶t̶ ̶s̶t̶o̶r̶y̶_̶h̶t̶m̶l̶5̶:̶ ̶a̶d̶d̶i̶n̶g̶ ̶t̶h̶i̶s̶ ̶c̶o̶d̶e̶ ̶ ̶ ̶<̶a̶u̶d̶i̶o̶ ̶s̶r̶c̶=̶"̶y̶o̶u̶r̶ ̶a̶u̶d̶i̶o̶ ̶f̶i̶l̶e̶ ̶n̶a̶m̶e̶.̶m̶p̶3̶"̶ ̶i̶d̶=̶"̶b̶g̶S̶o̶n̶g̶"̶ ̶p̶r̶e̶l̶o̶a̶d̶=̶"̶a̶u̶t̶o̶"̶ ̶a̶u̶t̶o̶p̶l̶a̶y̶ ̶l̶o̶o̶p̶>̶<̶/̶a̶u̶d̶i̶o̶>̶
Don't manually add the code... let Javascript add it for you. Add a trigger to execute JavaScript at Timeline start and use the following code:
//create a function to add the music elements dynamically into the head of the html 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);
}
//run the function only if the added html lines have not already been added
if(document.getElementById('bgSong')==null){
add_line();
var audio = document.getElementById('bgSong');
audio.volume = 0.5;
}
2. On Storyline Trigger--> Execute javascript when time line start:
var audio = document.getElementById('bgSong');
audio.src="1.mp3"; // be sure you are including the FULL URL or RELATIVE path to where the music is located
audio.load();
audio.play();
Thank You so much Owen,
Updated from me:
I successfully make it run,
The Problem is:
I am still using your old code Owen by edit the output because some how via Webobject & Location still doesn't work for me.
Again, Much Thanks for your Support Owen
Sorry My Mistake, Owen
UPDATED:
It Still does not run when I Upload to LMS or SCORM Cloud.
Have you ever tried to upload to SCORM Cloud Owen ? please let me know if it is work
Thanks