How to Add Smooth Background Music in Storyline 360 Using JavaScript

Step 1: Add Background Audio in Storyline 360

● Open your course in Articulate Storyline 360
● Go to the Insert tab
● Click Audio → Background Audio
● Select Create Playlist
● Add your audio file and click OK

Preview your course — the audio will play continuously across slides.

Step 2: Create a Volume Control Variable

Create a number variable:
● Name: Bg_Control_Volume
● Default Value: 100

This variable will control the background music volume dynamically.

Step 3: Configure Slide Master for Global Control

● Go to View → Slide Master
● Select the main Master Slide

Now add the following triggers:

Trigger 1: Set Initial Volume
● Action: Adjust background audio volume
● Set to: 0%
● When: Timeline starts

Trigger 2: Sync Volume with Variable
● Action: Adjust background audio volume
● Set to: Bg_Control_Volume
● When: Variable changes

Trigger 3: Stop Music
● Action: Stop background audio
● When: Variable changes
● Condition: Bg_Control_Volume = 0

Trigger 4: Play Music
● Action: Play background audio
● When: Variable changes
● Condition: Bg_Control_Volume = 1

Step 4: Add Fade-In Effect Using JavaScript

Create a new trigger:
● Action: Execute JavaScript

var player = GetPlayer();
var duration = 1000; // 5 seconds
var interval = 10;   // update every 50ms
var steps = duration / interval;

var targetVolume = 100; // increase up to 50%
var currentVolume = player.GetVar(“Bg_Control_Volume”);

// If starting from 0, ensure it’s initialized
if (currentVolume < 0) currentVolume = 0;

var increment = (targetVolume – currentVolume) / steps;

var fade = setInterval(function() {
currentVolume += increment;

if (currentVolume >= targetVolume) {
currentVolume = targetVolume;
clearInterval(fade);
}

player.SetVar(“Bg_Control_Volume”, Math.round(currentVolume));
}, interval);

● When: Timeline starts

Add a fade-in script to gradually increase the volume over one second (or adjust the duration based on your course requirements), then click OK.

This ensures your background music starts smoothly instead of abruptly.

Step 5: Add Fade-Out Effect Using JavaScript

Next, create another trigger:

● Action: Execute JavaScript

var player = GetPlayer();

// Clear any existing fade (IMPORTANT)
if (window.bgFadeInterval) {
clearInterval(window.bgFadeInterval);
}

// Settings
var duration = 5000; // 5 seconds
var interval = 50;
var steps = duration / interval;

var currentVolume = player.GetVar(“Bg_Control_Volume”);
var targetVolume = 0;

// Smaller step = smoother fade
var decrement = (currentVolume – targetVolume) / steps;

// Store interval globally so we can clear it later
window.bgFadeInterval = setInterval(function() {

currentVolume -= decrement;

if (currentVolume <= targetVolume) {
currentVolume = targetVolume;
clearInterval(window.bgFadeInterval);
}

player.SetVar(“Bg_Control_Volume”, Math.round(currentVolume));

}, interval);

● When: Timeline reaches 5 seconds before the end

Add a fade-out script to gradually decrease the volume over five seconds, then click OK.

This prevents sudden audio cuts during slide transitions.

Step 6: Apply Across Slide Master

To maintain consistency:
● Repeat the same steps on other slides within the Slide Master
● Adjust the trigger timing as needed (e.g., 20 seconds before the end)
● Apply a fade-out script that matches the selected duration

This ensures consistent audio behavior across your entire course.

Step 7: Preview and Test

● Preview your course
● Confirm that the background music:

1. • Fades in smoothly at the start
   • Fades out naturally before the slide ends