Forum Discussion
Mute audio using javascript
Hi guys,
i want to create my own mute/unmute audio button using articulate.i done this but i have a small problem.
problem:
i have three to four audio within a single slide.
when i click mute button from beginning of the timeline and when my timeline reach audio 2 it get automatically play but my button is mute stage(selected).
- MarkSpermon-33eCommunity Member
The code Snorre has provided in this thread. Doesn't work in Storyline 360. I compared the code output for a Storyline 2 and a Storyline 360 module and it seems that in Storyline 360 they don't use the HTML audio element anymore to load audio files.
So the javasccripts that are on the forum don't work anymore.
Has anyone an idea how audio is played in Storyline360? And if there is a possibility to mute audio like in Storyline 2?Thanks,
Mark
- CK1CK1Community Member
Following. Looking for a solution as well.
- Jürgen_Schoene_Community Member
this stops working some years ago
https://community.articulate.com/discussions/articulate-storyline/javascript-to-mute-audio?page=5
the new methode is
DS.appState.onToggleVolume();
and here some other nice functions
DS.appState.currentVolume() // get sound volume [0 ... 1]
DS.appState.setVolume( value ) // set sound volume value: [0 ... 1]
DS.appState.lastVolume // value: [0 ... 1]
DS.appState.enterFullScreen(); // start fullscreen mode
DS.appState.exitFullScreen(); // exit fullscreen mode
DS.appState.toggleFullScreen(); // toggle fullscreen mode
DS.appState.accessibleTextOn();
DS.appState.accessibleTextOff();
DS.appState.getPlaybackSpeed();
DS.appState.setPlaybackSpeed( value );
DS.appState.playbackSpeed - MichaelAnder569Community Member
Lizzie over here https://community.articulate.com/discussions/articulate-storyline/javascript-to-mute-audio?page=4 posted the solution. Make sure you visit the thread and thank her. Here's the code:
var appState = require("helpers/appState");
appState.onToggleVolume();//mute
- MateuszSzuterCommunity Member
This should work always because it's Storyline's player function. It basically "clicks" the button from your player and make the training mute. All other options are overkill and unnecessarily complicated.
- MathNotermans-9Community Member
As Jurgen stated indeed...
Require is a Javascript library that doesnot work in newer browsers or might be added to the core in the newest Storyline updates. So you need to ensure not using it directly.var appState = require("helpers/appState");
appState.onToggleVolume();//mute
Above the first code years ago. This will not work nowadays anymore.
When you however comment the first line and add DS ( for some Articulate internal stuff ) before appState it works fine.//var appState = require("helpers/appState");
DS.appState.onToggleVolume();//mute
So in later years someone used a ternary operator ( in fact an if/then check https://www.javascripttutorial.net/javascript-ternary-operator/ ) to check for DS or require availability and this works fine still.//mute/unmute
// Use the global DS object if it exists, otherwise try require:
var appState = window.DS ? DS.appState : require("helpers/appState");
appState.onToggleVolume();
- SnorrskiCommunity Member
Hi Anitha
I would suggest that you add an extra variable, and another trigger:
In storyline add the variable "muted", which could be a true/false. Then use it in your code.
var player = GetPlayer();
var muted = player.GetVar("muted");
var a = document.getElementsByTagName('audio');
for(var i=0; i < a.length; i++)
{
if (a[i].volume>0)
{
a[i].volume=0;
player.SetVar("muted", true)
}
else
{
a[i].volume=1;
player.SetVar("muted", false)
}
}This will tell set an custom variable which you can use to check if the use has chosen to mute the audio.
Then for each audio piece, add an extra trigger to run at the same time as the next audio file starts with the following code:
var player = GetPlayer();
var muted = player.GetVar("muted");
if (muted)
{
a[i].volume=0;
}This will check if the user has chosen to mute the audio, and remute if so.
- AmitParshion919Community Member
This works. Thanks a lot :-)
- SamHillSuper Hero
REDUNDANT :: DO NOT USE
This method uses vanilla JavaScript and so is future proof.
To mute all audio on the page (audio/video elements)
document.querySelectorAll("video, audio").forEach(elem => elem.muted = true);
And to unmute
document.querySelectorAll("video, audio").forEach(elem => elem.muted = false);
- anithaduraisamyCommunity Member
my javascript coding is,
var a = document.getElementsByTagName('audio');
for(var i=0; i < a.length; i++)
{
if (a[i].volume>0)
{
a[i].volume=0;
}
else
{
a[i].volume=1;
}
}can you pls see this video....
if you know the answer help me........
thanks
Anitha
Hello Anitha - I cannot assist with your JavaScript coding, but hopefully someone in the community will be able to chime in and assist you here.
- MehdiKasumov-cbCommunity Member
would anyone be able to post a Storyline fine that does it?after all upgrades the storyline does javascripts stop working
- Jürgen_Schoene_Community Member
for audio it's not working, because storyline don't use html5 audio with a webserver and modern browser, storyline uses - if available - web audio
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
if you wan't html5 audio, you have to
copy
window.AudioContext = null;
window.webkitAudioContext = null;to
story.html + index_lms.html
or better at the end of the user.js
the two lines cannot be added to the internal storyline javascript - it's to late