Forum Discussion

MathNotermans-9's avatar
MathNotermans-9
Community Member
3 years ago

Continuous playing Background Music over all Slides in Storyline360

As this subject keeps returning i decided to make a single post in which i add my solution to this, so when replying on someone's question to this i can just point to this post.

In fact its easy enough to do in Storyline as is with some Javascript.

Here you can see a sample.
https://360.articulate.com/review/content/7dc09046-4f80-439c-ba91-23af8fdd08f0/review

And for some other user i made a simple sample. Very easy for not-experienced Javascripters to get this working. You only need to do 2 things to get background audio working properly.

- Replace the audiofile in the resources.
- Change the variable 'audioFile' into the name of your audiofile.

And then all works.

Basically there is an extra slide not used in the flow, but adding resources that in the end will publish to the storyline_content.

A variable with the 'filename.mp3' is set so in the end you only need to change that variable and add any wanted audio to the resources.

At start a Javascript is executed adding the needed code to the HTML and then another Javascript is needed on a trigger to start the background audio playing. As is you cannot use the default Storyline volume button as this only works with inline Storyline audio. I added a button to pause/play audio. Thats the easiest solution for that. Offcourse you can add the pause/play and the volume control functionality to the default Storyline button, but thats another journey.

Good luck,
Math

 

storyline 360
  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    2 years ago

    iPhone and iPad probably have other restrictions that prevent the auto playing of background music.... or the folder structure is different. Checking your console on the iPhone/iPad will give you clues on whats wrong.

    • HappilyCreative's avatar
      HappilyCreative
      Community Member
      2 years ago
      Math Notermans

      structure

      Spent a good bit of time trying to figure this out and was finally able to get this to work with your solution. Thanks so much for posting about this, Math! Hopefully there will one day be an option to include background audio in select slides built into Storyline like there is now with across all slides. 

  • Jürgen_Schoene_'s avatar
    Jürgen_Schoene_
    Community Member
    2 years ago

    >Checking your console on the iPhone/iPad will give you clues on whats wrong

    unfortunately debugging on ios safari is not easy - there is no visible console in the browser(s)

    instead you can

    all methods are not for beginners

     

    • MathNotermans-9's avatar
      MathNotermans-9
      Community Member
      2 years ago

      Do like the vConsole.js tip Jurgen. Gonna implement it in my projects that need to be tested on iOs...

  • BrianAllen's avatar
    BrianAllen
    Community Member
    3 years ago

    Math, thank you for posting this, I like the simplicity of this method, much appreciated!

  • JadeTan-c7c8574's avatar
    JadeTan-c7c8574
    Community Member
    3 years ago

    Hi Math, thanks very much for this solution. I've tried the method but it didn't work for me. Not sure if my variables in the scripts are correct. I've highlighted the variable in bold below. Please see:

    Slide 1: When timeline starts (no changes);
    var player = GetPlayer();


    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 = false;
    head.appendChild(line);
    }

    //We only want to add these once!
    if(document.getElementById('bgSong')==null){
    add_line();
    var audio = document.getElementById('bgSong');
    audio.volume = 0.3;
    player.SetVar("javascriptsLoaded",true)
    }

    Slide 1: When javascriptsLoaded changes

    var player = GetPlayer();
    this.Location= player.GetVar("location");
    this.audioFile = player.GetVar("audiobg.mp3");
    var audio = document.getElementById('bgSong');
    audio.src=Location + audiobg.mp3;
    audio.load();

    Slide 1: When user clicks button 1

    var player = GetPlayer();
    this.Location= player.GetVar("location");
    this.audioFile = player.GetVar("audiobg.mp3");
    var audio = document.getElementById('bgSong');
    audio.src=Location + audiobg.mp3;
    audio.load();
    audio.play();

    Slide 2: Execute javascripts when user clicks button 1

    var player = GetPlayer();

    this.Location= player.GetVar("location");
    this.audioFile = player.GetVar("audiobg.mp3");
    var audio = document.getElementById('bgSong');
    audio.src=Location + audiobg.mp3;

    audio.pause();
    audio.currentTime = 0;

     

    Hidden slide:

    I've pasted the audio source file here. The name is audiobg.

     

    But for some reasons the published sample has no sound. Appreciate your help.

     

    Thanks!

     

    Warm regards,

    J

    • MathNotermans-9's avatar
      MathNotermans-9
      Community Member
      3 years ago

      Sharing your sample probably easiest. What i can see now is that you probably mixup Storyline variables and audio file name. Do use something like.. 'myAudioBgVar' for your Storyline variable. Then it makes way more sense. And then you can set your variable to the proper audiofile.

      And you donot need to have the audio file in the Storyline timeline. It needs to be added as resource. Like in the sample...

  • JadeTan-c7c8574's avatar
    JadeTan-c7c8574
    Community Member
    3 years ago

    Hi Math,

    I attempted the method which you have shared, without changing any code in the javascripts:

    1. Replace the audiofile in the resources slide

    2. Change the variable 'audioFile' default value to 'audio-bg.mp3' which is my audio file name. But it still doesn't work.

    Appreciate your help.

    Thanks!


    Warm regards,
    Jade

  • VeronicaKeong's avatar
    VeronicaKeong
    Community Member
    2 years ago

    Hi, we are migrating the e-learnings to TalentLMS and did the same steps as you mentioned after converting to SCORM. However, i realise the music background played on laptop but not on iphone/ ipad. Is this the expected behavior?

Related Content