Stuck with customizing volume controls and its placement on the Articulate Storyline 2 player.

Hi, Vijay -- Thanks for reaching out here! Perhaps you might want to take a look at the following discussions related to customizing volume control, and you are also welcome to reach out in our Developer SDKs and APIs forum for additional thoughts, as well:

• Custom Volume Control?
• Custom volume button 

Hello Vijay,

Customizing volume controls functionality requires JavaScript for HTML5 and soundmanager.swf for Flash. For more information, click on the hyperlink - Volume control for both HTLM5 and Flash

Hello Godwin

I modified the code a little bit as and it works:

var player = GetPlayer();
Audio.setMasterVolume(0); // to mute

and 

var player = GetPlayer();
Audio.setMasterVolume(0.8); // to unmute

I tried your code for HTML5 only and it works but there is a limitation for browsers.

This code works fine in Chrome and doesn't work in Firefox and IE11, any idea how can I get is work in IE11 and Firefox?

Thanks in advance

Ajay Khatri

Hi Ajay,

If you see my example in the link Volume control for both HTLM5 and Flash the slider actually reduces, increases and even mutes currently playing audio itself.

The 'volumeCount' is a slider variable which returns a numeric value based on the user's interaction with the slider.  

var player = GetPlayer();
Audio.setMasterVolume(volumeCount); // this is code we write in storyline

and 

var player = GetPlayer();
Audio.setMasterVolume(0.8); // in runtime 'volumeCount' changes to a number. Which is exactly the same as your code.

So the code is meant to manipulate currently playing audio volume.

I guess you are trying to achieve the same functionality with out the slider. By just toggling volume on and off button.

If so, add the code below as a trigger to "Execute JavaScript when timeline starts"

var player = GetPlayer();
setInterval(function(){
var volumeCount = player.GetVar('volumeCount')
Audio.setMasterVolume(volumeCount);},10);

Then, give a tigger on mute button as 'Adjust variable "volumeCount" to 0' // to mute it.

and a tigger on unmute button as 'Adjust variable "volumeCount" to 1' // to unmute it.

Hope this helps you out.

Good luck.

Please check if my example is working in IE11 and Firefox. If yes, then it must work for you too.

I have checked my example in all major browsers and even on ipad. It worked fine for me.

If it still doesn't, try updating your browsers.

Thanks for Replying Godwin,

The code is working fine, the issue now is that in IE11 and Firefox this code is not muting the current audio which is playing. The current audio which is playing is muted if we pause and play the audio again. rest all audio clips are muted or unmuted automatically as per the code.

Kind regards,

Ajay Khatri

The example is not working in Firefox, I just updated mine and now the updated version is 48.0.1. The slider is not working.

Lets see and discuss this tomorrow again as I am about to go home from office.

Kind regards,

Ajay Khatri

Hello again Ajay,

First of all thank you for bring this issue to my notice. I have created a new example which has a button that toggles between mute and unmute to find out if I could replicate the same issue you were facing with the current playing audio. And boom, I found it.

And I've fixed it.

Please add the following line of code to your current code and it must work fine now.

$('audio').prop('volume','0') // to mute 

$('audio').prop('volume','0.8') // to unmute

Hope this new example will help you out.

Thank and Regards,
Godwin VC.

Thanks so much for sharing your discovery, Godwin! Hopefully that will help Ajay and others who come across this discussion seeking assistance. 

Hello Godwin,

Thanks for the update and its working fine now.

You are a hero of JavaScript, I must say.

While I was testing the slider version with this code, the slider is not working in Firefox 48.0.1 (latest update), do you have any idea about it? The issue is that the moment I click on the slider button it resets the variable to 0 as the initial value of variable was 1 and stops dragging.

Thanks

Kind regards

Ajay Khatri

Thank You Ajay,

I have seen the issues of firefox and tested the slider in a blank project without any code. 

Slider was not responding in all the latest versions of firefox. Looks like storyline's HTML5 code is not working as expected on latest version of firefox.

As the slider is a storyline default option, there is nothing we do but wait for storyline team to fix it.

Hi Godwin! We do not support the HTML5 content in Firefox. You can read more about all of our system requirements here.