How to Create Custom Volume Controls in Articulate Storyline 2?
In Articulate Storyline 2, by default, the Volume Control position is
fixed on the player and cannot be customized. Due to this limitation,
it was challenging for us to customize volume controls.
How did we overcome this limitation?
We created our own customized audio controls using slider via JavaScript and SWF file. This way we could develop fully customized volume control and it can be placed anywhere on the screen.
Let’s have a look at the steps to create Custom Volume Controls for both HTML5 and Flash.
This is awesome thanks!!!
This is to much good
Thanks for support :)
Thanks Reena. Glad you liked it.
its not working in HTML output
Hi Sameer,
Can I know the browser you are using? In Firefox it seems to have some limitation.
Also can you try the link given below and let us know if the slider works on your machine.
https://www.swiftelearningservices.com/course/custom_volume_control/story_html5.html
Hi Godwin,
It doesn’t work with either chrome 60.0.3112.101 or opera 47.0.2631.71 without flash. In firefox I even can’t use slider itself (doesnt’t matter for me)
Hi Nick,
In Firefox it seems to have some limitation with the slider.
You can use the below script instead to control the volume in latest browsers:
$(‘audio’).prop(‘volume’,’0′) // to mute
$(‘audio’).prop(‘volume’,’0.8′) // to unmute
you can use any decimal number between 0 and 0.8 to increase and decrease the volume.
Hope this helps.
Thank you! It works fine for me.
Also I wrote the same for video.
The variable volumeCount is not needed. Just use volumeSlider with parameters: start-end: 0-1; step 0.1; initial: 0.8
So you don’t need use dividing by 10.
var player=GetPlayer();
var v_volume = player.GetVar(“volumeSlider”);
Audio.setMasterVolume(v_volume);
$(‘audio’).prop(‘volume’,v_volume);
$(‘video’).prop(‘volume’,v_volume);
Hello. I have tried the link on Chrome and Edge and it is not working on both.
Hi Marko,
You can use the below script instead to control the volume in latest browsers:
$(‘audio’).prop(‘volume’,’0′) // to mute
$(‘audio’).prop(‘volume’,’0.8′) // to unmute
you can use any decimal number between 0 and 0.8 to increase and decrease the volume.
Hope this helps.
This is not working for me, whether I publish it to LMS or try it in variable browsers. I posted on the articulate website and of course, the articulate support does not offer any support for their javascript function. The posting is here – but what I really need is the simple fix, I assume there is one!
Original post: https://community.articulate.com/discussions/articulate-storyline/storyline-360-in-story-volume-control-scripts
Hi Dylan,
You can use the below script instead to control the volume in latest browsers:
$(‘audio’).prop(‘volume’,’0′) // to mute
$(‘audio’).prop(‘volume’,’0.8′) // to unmute
you can use any decimal number between 0 and 0.8 to increase and decrease the volume.
Hope this helps.
I am so lost – I have tried everything to get this to work.
tested the preview link on all browsers and it works, but if I download the source file and republish it doesn’t appear to work any more.
I tried adding in the code:
$(‘audio’).prop(‘volume’,’0′) // to mute
$(‘audio’).prop(‘volume’,’0.8′) // to unmute
I put it underneath the original code
But this did not work.
I cannot work out what is wrong – any help greatfully appreciated
Hello Lizzie,
Think I found the issue. It can be the single quotes creating the trouble. Sometimes when we copy and paste code from a web page, single quotes ( ‘ ) in the code will be pasted in a different format which causes errors in JavaScript.
The simple fix for this problem is, after you paste the code in Articulate Storyline, just delete and retype all the single quotes and it should work fine.
ok so I think the quote marks were part of the probelm – but I am also using Storyline360 and it doesnt seem to work with that
Is your suggestion valid for SL 360 course? or is it only SL2?
It is for Articulate Storyline 2. Whereas in Articulate Storyline 360, the process is completely different.
Can you describe one for Storyline360?
We have already developed a template for SL 360. I will probably try to share the code by next week.
Here is the link to the blog on custom volume control in SL 360
https://www.swiftelearningservices.com/custom-volume-control-articulate-storyline-3-or-articulate-storyline-360/
Custom Volume Control – Articulate Storyline 3 or Articulate Storyline 360 –
I’m trying to implement this in latest storyline 360, but it’s not working. I unable to findout “app.min.js”.
I need help to sort out this thing. Also I want to work that audio control on Scorm Cloud.