Forum Discussion

AndersonRumuy's avatar
AndersonRumuy
Community Member
5 years ago

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

 

 

 

  • Hi everyone!

    I have some great news to share. We just released another update for Storyline 360. In Update 74, we've included important fixes and new features.

    One of the new features we've included is: 

    • Create immersive experiences with continuous background audio that sets the tone and keeps learners engaged.

    Launch the Articulate 360 desktop app on your computer to take advantage of this update, and click the Update button next to Storyline 360. You'll find our step-by-step instructions here.

    Please let me know if you have questions!

  • 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.

    • AndersonRumuy's avatar
      AndersonRumuy
      Community Member

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

    • AndersonRumuy's avatar
      AndersonRumuy
      Community Member

      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

       

    • AndersonRumuy's avatar
      AndersonRumuy
      Community Member

      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

       

  • Hi all

    When i close the course and resume where i left the background music not playing. Please help me in this.

    • MathNotermans-9's avatar
      MathNotermans-9
      Community Member

      As the scripts adding the audio to the background might be set at your first slide...well on resume that one is skipped and thus not playing. Add the Javascript to a MasterSlide to get it anywhere. 

  • Hi everyone!

    I have some great news to share. We just released another update for Storyline 360. In Update 74, we've included important fixes and new features.

    One of the new features we've included is: 

    • Create immersive experiences with continuous background audio that sets the tone and keeps learners engaged.

    Launch the Articulate 360 desktop app on your computer to take advantage of this update, and click the Update button next to Storyline 360. You'll find our step-by-step instructions here.

    Please let me know if you have questions!