Mute all button sounds

Using JavaScript with Hype
1

Hello again.

I’m wondering how I can make two buttons which allow me to mute and unmute all the sounds which I assigned to my actions. I’ve read everything about an universal mute button in this forum and I tried really everything and it just doesn’t work. All of the examples I’ve found first loaded sounds in onSceneLoad but my sounds are assigned only to buttons.

It should be as easy as: “mute all audioID’s in all scenes / unmute audioID’s in all scenes”.

It would be great to have a very easy tutorial for beginners. There’s something I’m doing completely wrong. I guess it should be very easy and I just don’t know what I’m doing :smiley:

Cheers!

2

Do you have an example you can post of your project

1 Like
3

Hi @MarkHunte Here’s zip file with the first two scenes. As an example pease have a look at “Lada und Ford”. I put the assigned audioID box next to the button. I want to assign sound files to all buttons and all actions. But it needs an universal “audio on/off” button in the first scene.

As I said I tried everything I found but it just didn’t work. I’m kind of frustrated because of that.

Thanks! :slight_smile:blahasblog_example_scenes_js.zip (1.8 MB)

In case you want to see it, here’s the URL: http://www.blahasblog.de/#main

4

Will post something back in a min. I have a symbol that should do the trick.

5

So this is related to this post.

This is not a mute as such. Just a check box.

I have adapted here to be a persistent symbol.

All this does is simple sets a global var to true or false.

When you then go to a scene and the play scripts are called then they will check what the globals value is and play or not play.

the mute var is inited in initMute() on symbol load .

	 if(typeof  window.muteAll   == "undefined") {  window.muteAll   = false
	 
	 
	 
	 console.log(  window.muteAll );
	 
	 }

When the checkbox is clicked, the symbol runs it's
selection() function.

This animates the check box and sets the global var....

	var thisSelection = hypeDocument.getSymbolInstanceById( (element.closest('.checkboxGroup').parentElement.closest('.HYPE_element').id)).symbolName()
 
	//var thisSelection = element.title //-- get the Title/alt Text of the check group.
	var selectionTick = element.querySelector('.tick')//-- find the tick image for this symbol
	var selectionTickState = hypeDocument.getElementProperty(selectionTick, 'opacity') //-- get the tick image opacity
 	 


selectionTickState === 0 ? (
    hypeDocument.setElementProperty(selectionTick, 'opacity', 1), //-- show tick
     window.muteAll  = true //-- add item reference to array

) : (
	
    hypeDocument.setElementProperty(selectionTick, 'opacity', 0),  
   
  window.muteAll  = false //-- remove item reference to array using the index
);

...ready for when you try to play a sound

	 if (! window.muteAll ){
	var a = new Audio("${resourcesFolderName}/blahasblog_ladaengine.mp3");
a.play();
 }

blahasblog_example_scenes_js._MHv1.hype.zip (2.3 MB)

Note I commented out the code in LOAD_Audio().

This was producing fatal error.

3 Likes
6

thanks a lot! this is exactly what I wanted. Except that I don’t know how to put it into my project. I’d like to export/import the symbol in my main project but that doesn’t work. I copied it from the test project I’ve uploaded and pasted it in my project. But it pastes only the graphics, not the behaviour?
Could you please write a short step by step explanation how to do it? I tried the whole day again… :smiley:

Cheers!

7

I have exported the symbol here.

mute.hypesymbol.zip (738.3 KB)

Note.

The export Symbol is already persistent.
This symbol also imports it's own functions.
initMute()
selection()

  • generally only import a symbol once into a project if you can, if you import a symbol more than once you duplicate all it's resources which also mean you get multiples of it's functions().
    ( if this happens you will need to manually remove or rename the duplicate functions )

1, Unzip the symbol.

2, Go to one of the Scenes Layouts that you want it on and use the import Symbol menu.
3, select the unzipped symbol.
The symbol will appear in the scene.

4,Select the symbol in the scene, copy it ( command + c )
5, and then go each of the other layout scenes you want it on and paste it into them ( command + p )

6, for each of the functions that play a sound from a click action that you want the mute to work for.
Open them for edit.
7, where you have the two lines for example.

var a = new Audio("${resourcesFolderName}/blahasblog_ladaengine.mp3");
a.play();

8, wrap them in this if (! window.muteAll ){ } condition so they look like this

	 if (! window.muteAll ){
	var a = new Audio("${resourcesFolderName}/blahasblog_ladaengine.mp3");
a.play();
 }

Suggestion,

This will not work for any sounds that play via a Play Action. i.e for zuruck zum hauptmenu ( return to main menu )buttons.

05
05542×808 65 KB

if you do want it to work for them then create a new zuruckZumHauptmenu() function and put something like this in it.

 	 if (! window.muteAll ){
	var a = new Audio("${resourcesFolderName}/blahasblog_ladaengine.mp3");
a.play();
 }	
 
setTimeout(function(){ 
 hypeDocument.showSceneNamed('main', hypeDocument.kSceneTransitionCrossfade, 1.1)
 
	
	}, 350);

Change the zuruck zum hauptmenu buttons actions to only call the zuruckZumHauptmenu() function.

13

--
The reason I have the scene transition in the function and also in a time out is so the sound plays first and not after the scene has already changed.

2 Likes