How to make a toggle button to toggle Audio Mute?

Here is an example that uses a multiple operation Ternary to set the button Title to Play or Pause.
The same idea is used for a mute button.

This means you only need one button for each task and you do not nee Jquary…

Play/Pause

window.audio.paused ? (
	
  window.audio.play(),
  
  element.innerHTML = "Pause"
 
) : (
   
  window.audio.pause(),
  element.innerHTML = "Play"
);

Also there is an event listener to reset the play button back to play when the track has ended.

playPauseButton 3.zip (171.3 KB)

2 Likes

Hi Mark!

We are speaking to different things - I should have included a visual. My frame of reference was an actual player interface with toggled icon buttons - the reason why I included jQuery.

Nice touch in your example with the “addEventListener ended” reset.

1 Like

Ah I see where you are coming from.

This is the problem of lack of defined information in questions like this, they leave a wide range of interpretation

Hello everyone,

I’m completely new to Hype and I’ve just made my first animation. However, I need to make a play/mute button that toggles for the audio.

I see various java scripts here. Where in Hype do I copy the function scripts?

All help would be greatly appreciated.

Thanks.

Hi Cheryl!

Just answered this question a few hours ago…

Hi Jim,

I appreciate your quick response. This is very helpful. How do I make the sound mute instead of pause. I don’t want it to pick up where it left off. I need music on/mute.

Thanks.

Hello Mark,

I’m very new to Hype and I don’t know javascript. How would I make the music play automatically and then have the button mute / play audio?

Thanks in advance.

Here’s all the crazy stuff you can do with audio:

And here’s a post specifically about muting:

Much of the information in these posts apply to audio on the web in general.

Hi Cheryl!

Hopefully I got your request this time around…
Demo Project: PlayMuteDemo_JHSv1.hype.zip (339.6 KB)

We need to make a few adjustments compared to the “Play~Pause” version.

We are going to add another global variable “firstPlay” (placed in the “On Scene Load” handler along with the global variable “myAudio”). We need this variable to allow the “Play~Mute” button toggle to work the first time You click the button - otherwise the code will not work as a “play~mute” toggle.

window.myAudio = hypeDocument.getElementById("myAudio1");
window.firstPlay = "true";
// allows the audio to play on the first click

The code in the “playMute” function:

myAudio.play();
	
	if(firstPlay == "false") {
 // i.e. we've clicked the button once before
		if(myAudio.muted == true) {
			myAudio.muted = false;
		}
		else if(myAudio.muted == false) {
			myAudio.muted = true;
		}
	}
	
	firstPlay = "false"; 
// set the variable to "false" to allow the button to be a toggle

Hi Jim,

This is great stuff and I truly appreciate your help. Is there a way to have the audio already playing On Scene Load and then use the button to mute and play?

I don’t know if this part is possible. Can I tell the audio to stop playing at the end of the scene?

I’ve been working on this all day, but egar to learn and finish my first project before I pull all my hair out.

Thank you so much.

Hi Cheryl!

“Mute~UnMute” Demo: MuteUnMute_Demo_JHSv1.hype.zip (351.9 KB)

A few changes - mainly we no longer need to have a “firstPlay” variable as the audio now starts when the Scene opens, so the parts of the code that relate to that aspect have been removed.

The audioInit() function that runs when the Scene opens (“On Scene Load” handler) now is

window.myAudio = hypeDocument.getElementById("myAudio1");
myAudio.play();

The MuteUnMute() function does exactly that - and is the same basic code as the previous “playMute” function - but as mentioned above but no longer tests if the button has been clicked before.

Additionally, when leaving “Scene 1” we have a closeScene() function that is triggered by the “On Scene Unload” handler that stops the audio. Returning to “Scene 1” starts the audio playing again from the beginning.

Hi Jim,

Awesome. This is exactly what I needed. I thank you so much. I definitely have to take a javascript class.
The only question I have left is where in the script can I put the elements below so the button will toggle between them. I tried inputing it myself, but couldn’t get it to work.

element.innerHTML = "music off"

element.innerHTML = "music on"

Hi Cheryl!

Demo Project: MuteUnMute_Demo_JHSv2.hype.zip (351.7 KB)
Note: it is 3:30 am here in California & my bedtime… I probably won’t be back on for another 10-12 hours. Some one else might be able to help if You have more questions in the interim.


The mute button in “Scene 1” now shows “Music Off” as its label (on start-up).

I added the following code to the innerHTML of this mute button:
<span id="musicMuteToggleText">Music Off</span>

This span’s text (i.e. the “Music Off” label) is what we will be changing. The rest of the code stays the same:

`Music Off

`
In the _audioInit()_ function (triggered by the "On Scene Load" event) the newly added global variable _muteToggleText_ will be used to access the "Music Off" text that appears in the mute button.
window.myAudio = hypeDocument.getElementById("myAudio1");
myAudio.play();
window.muteToggleText = hypeDocument.getElementById('musicMuteToggleText');
// i.e. the id of the span in the mute button's innerHTML

The finishing piece in the muteUnMute() function (called by the mute button):

if(myAudio.muted == true) {
	myAudio.muted = false;
	muteToggleText.innerHTML = "Music Off";
}
	else if(myAudio.muted == false) {
		myAudio.muted = true;
		muteToggleText.innerHTML = "Music On";
}
2 Likes

Thanks Jim,

This is perfect. Thank you for your patients and taking the time to help me. It was truly appreciated. Have an awesome weekend. Hope I can help you one day.

1 Like

Hi Mark! Thank for your solution which help me a lot! But I have a trouble now. I want to use 2 images to represent “play” and “pause” instead text. So I import 2 images and edit the PLAYBOTTON’s innerHTML. But I don’t know how to edit the innerHTML in these code below:
hypeDocument.getElementById('playButton').innerHTML = "Play"
In fact I’m a designer and I know little about code…so maybe it’s a very stupid question…~:weary:

I look forward your help, thankkkkk you!~! :grin::grin:
This is my test hypedocument. musictest.zip (176.9 KB)

For this you need to just drop the music.png on to the scene.
Then set it’s on click action to the playPause()

In the config() function you need to then set the image’s backgroundImage not the innerHTML.

window.audio = new Audio();
	window.audio.src = "${resourcesFolderName}/Blues-Loop.mp3";
 
	  window.audio.addEventListener('ended', function () {
	 
	 
	 hypeDocument.getElementById('playButton').style.backgroundImage = "url(${resourcesFolderName}/music.png)";  
	 
	 
	 });

The same goes for the playPause() function

window.audio.paused ? (
	
  window.audio.play(),
  
  element.style.backgroundImage =   "url(${resourcesFolderName}/nomusic.png)" 
 
) : (
   
  window.audio.pause(),
   element.style.backgroundImage =  "url(${resourcesFolderName}/music.png)" 
);

musictest_MHv1.hype.zip (174.7 KB)

With the New version of Hype 3.6.1

You can now set the background image using the Hype API hypeDocument.setElementProperty

window.audio.paused ? (
	
  window.audio.play(),
  
   
 hypeDocument.setElementProperty(element, 'background-image', '${resourcesFolderName}/nomusic.png')
) : (
   
  window.audio.pause(),
    
   hypeDocument.setElementProperty(element, 'background-image', '${resourcesFolderName}/music.png')
);

Note the optionalDuration & optionalTimingFunctionName for the API are ignored if you use them with this property.

1 Like

how to play audio looping all the time?

you just need:

window.audio.loop = true;

Note that some older browsers didn’t support this property; see this stack overflow tip if you need workarounds:

Hi Mark,
I found your answers very helpful and was able to download the files you created and play with them a little. I’m very new to Hype and Javascript and got stuck with the on/off audio button. I followed the instructions in this thread but can get the button to work! I have attached the file here. The button on top is the one I’m stuck with. The two buttons right below is my back up plan if I can get it to work.

I would love to know what I’m doing wrong! I don’t know javascript, so I just copied the functions you had and applied to the scenes. I had to remove the audio from this file as it wouldn’t let me upload. Thank you so much. Issue with sound.hype.zip (15.4 KB)