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).
17 Replies
- JimOwen-f418d1fCommunity Member
Is there a way to do this at an individual audio object level rather than muting the entire project?
- HoneyTurnerCommunity Member
I'm looking for the answer to this too. I want my spoken audio to remain on, but my musical audio (not background music!!) to be optional.
- LiGPlaymakersDeCommunity Member
This seems to work well:
//mute/unmute
// Use the global DS object if it exists, otherwise try require:
var appState = window.DS ? DS.appState : require("helpers/appState");
appState.onToggleVolume();My challenge is that when users restart the course if the volume is toggled off it stays off and my speaker visual stops matching the sound. :/
Any ideas on how to turn the sound back on...
I was thinking about having my reset button toggle the java script but the problem is if the sound is on it is now off and I have the same issue ... if that makes any sense...
Edit:
Here's the code you can either execute on the first slide or at the end to reset the volume to on.
var appState = window.DS ? DS.appState : require("helpers/appState");
appState.setVolume(1);There is probably a better javascript code you could use that is like
getSound level if 0 set your sound variable to false
if 1 do nothing
- RachelPorter-f5Community Member
Hi there,
I came across your comment when searching for a solution to the exact same issue. I was able to work out the JavaScript code so I thought I would share.
When sound variable is true (sound on), use JavaScript code:
$volume = 1
DS.appState.currentVolume($volume);
When sound variable is false (sound off/muted), use JavaScript code:
$volume = 0
DS.appState.currentVolume($volume);
When your module restarts, it will return to whatever your default value is for your sound variable (in my case, sound on) and should therefore match your audio button.
- 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();
- 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 - 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
- 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);
- MehdiKasumov-cbCommunity Member
would anyone be able to post a Storyline fine that does it?after all upgrades the storyline does javascripts stop working
- 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.
- 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.
- 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 :-)