Trying to add mute button to UI bar (Twine 2, Sugarcube)

Authoring Twine
1

Please specify version and format if asking for help, or apply optional tags above:
Twine Version:2.3.9
Story Format: Sugarcube 2.31.1

I would like to include a “mute audio” button in the UI bar. I’m using `this code from HiEv’s archive and have added it to my story JavaScript.


function masterMuteHandler() {

    SimpleAudio.mute(settings["masterMute"]);

}

Setting.addToggle("masterMute", {

    label    : "Master Mute.",

    desc     : "Mute control for all audio.",

    onInit   : masterMuteHandler,

    onChange : masterMuteHandler

}); // default value not defined, so false is used

My problem is getting the button to do anything.

I’ve tried several things. This is my most recent code:

<<button "🔇">>
<<if setting.masterMute>>

  <<set setting.masterMute=true>>

<<else>>

  <<set setting.masterMute=false>>

<</if>>

<</button>>

That results in an error that “setting” is not defined. (I’ve seen other example code that uses setting.SettingName inside a Twine <> statement after calling Setting.addToggle in the JavaScript, which is why I’m trying it this way.)

Any help would be greatly appreciated. Thank you!

(I’ll obviously want to change the button text too, but that’s not really the trouble right now.)

2

You don’t really need a separate function for this. This technique uses the SimpleAudio API in Sugarcube:

First, in your startup:

<<set $mute to false>>

Then, wherever you want the mute toggle:

<<button "🔇">>
     <<set $mute to !$mute>>
     <<run SimpleAudio.select(':all').mute($mute);>>
<</button>>
1 Like
3

The special variable you need to use is settings not setting.

…and the code for a simple toggle button would looks something like the following…

<<button "Toggle Master Mute">>
	<<set settings.masterMute to !settings.masterMute>>
<</button>>
1 Like
4

For added clarity to what the others have said, the Setting object is for setting up the “Settings” dialog window, while the settings object is used for accessing the values of the various settings. The capitalization and pluralization have to match exactly for them to work properly. See the SugarCube documentation on the Setting API and the settings object for details.

Also, if you want to toggle the button icon too, you can do this:

<span id="mutebtn"><<button `settings.masterMute ? "🔇" : "🔊"`>>
	<<set settings.masterMute = !settings.masterMute>>
	<<run $("#mutebtn button").html(settings.masterMute ? "🔇" : "🔊")>>
<</button>></span>

The “!” in the front of “settings.masterMute” means “not”, so it sets it to the opposite Boolean value from what settings.masterMute had before.

And, to make sure that the button also changes when you change that setting in the “Settings” window, you’d do your JavaScript code like this:

function masterMuteHandler() {
	SimpleAudio.mute(settings.masterMute);
	$("#mutebtn button").html(settings.masterMute ? "🔇" : "🔊");
}
Setting.addToggle("masterMute", {
	label    : "Master Mute.",
	desc     : "Mute control for all audio.",
	onInit   : masterMuteHandler,
	onChange : masterMuteHandler
});

See the jQuery .html() method and the JavaScript conditional operator (the “var ? true : false” code) for details on how those work.

Enjoy! :grinning:

1 Like
5

Thank you all for the suggestions - I appreciate them!