Music Background is not working in Scorm Cloud

Dec 31, 2019

Anderson Rumuy
By Anderson Rumuy

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

 

 

 

7 Replies
OWEN HOLT
3 years ago01/03/20 at 2:28 pm (UTC)

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.

OWEN HOLT
3 years ago01/06/20 at 4:07 pm (UTC)

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();

Anderson Rumuy
3 years ago01/07/20 at 3:24 am (UTC)

Thank You so much Owen,

Updated from me:

I successfully make it run, 

The Problem is:

  • There are overlapping residual variable "Volume" so SL3 is confused which one to run, after I deleted all of the residual files (I tried & make manny changing thats why there are manny residual file in Variables Tab management) & finally it is work
  • I have to make sure that in Variable "Volume" it has tobe used for;
    • Execute by javascript when the variable Volume changes
    • Referenced by Dial  --> which is I use to get the volume control

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

 

Sign In to Reply