Custom volume buttons for several audio files

Jan 18, 2024

Hi everyone,

I am trying to create a slide on which learners have to isolate a sound.

Objective:

I have 4 audio files on the same slide. Learners have to use the 4 different cursors (or sliders) to adjust the volume of each audio file.

I found in an old thread an example using javascript, but the slider control the volume of the whole slide as one audio. (https://community.articulate.com/discussions/articulate-storyline/custom-volume-button-9378ea7b-3264-4372-871a-b47672a92ea1)

Could someone help me to adapt the javascript code to control my audio files independantly?

1 Reply
Nathanial Hilliard

Hi Isabelle. Please see this example. I have attached the project file.

https://360.articulate.com/review/content/8bd10c94-2c2e-4eb0-b8c5-2d75d847904d/review

This was a bit more problematic than I anticipated. Normally, we can isolate slide elements in a couple of ways; either as an array, ordered according to the stacking order on the timeline, or directly using accessibility tags. The tag method did not seem to work with the audio tracks (not sure why, never tried it with them before), and the natural loading order of tracks seemed to be inconsistent (maybe because of the size of the audio files?). The tracks would sometimes get mixed-up, so that did not work reliably. 

I settled on using the unique lengths of each audio track as an identifier, allowing me to make sure I knew which track was which. After getting the tracks sorted out, you merely have to adjust the volume of each specific track according to the slider setting. The JavaScript is called whenever one of the sliders moves. You may work out a more refined approach.

The example simulates a busy restaurant, and you can individually reduce the volume of each of the ambient sounds, making the others stand out better.

You just need to set the audioLen0,1,2,3 variables with the length of each audio track, in seconds (truncated to the tenth). You can change how this works to suit your tastes. Just match the order with the order of the volume settings at the end of the script.  You can see the approximate lengths of your audio tracks in the SL media library, or the actual lengths in the browser console window (F12). Note: as it is, adjusting the main SL volume sets all tracks to one volume. You will need to account for that in your final solution.