How to make a toggle button to toggle Audio Mute?

[MarkHunte]

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)

[JimScott]

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.

[MarkHunte]

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

[cnagraphix (Cheryl)]

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.

[JimScott]

Hi Cheryl!

Just answered this question a few hours ago...

Newbie question: One button to play AND pause audio, possible?

Hi Christina! Demo project: PlayPauseDemo_JHSv1.hype.zip (339.7 KB) In this Demo project “myAudio” is set as a global (in this case: “On Scene Load”)… window.myAudio = hypeDocument.getElementById("myAudio1"); Note that the “id” is the id of the audio track as shown in the innerHTML of the button) NOT the button’s id set in the “Identity” panel. [image] The "playPause()" function in the Demo - which "toggles" between playing the sound and pausing it - is triggered by a button's "On Mouse …

[cnagraphix (Cheryl)]

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.

[cnagraphix (Cheryl)]

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.

[Daniel]

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

Controlling Audio & Advanced Techniques (AutoPlay, Play, Pause, Rewind, Volume control)

Tumult Hype fully support audio actions so you can easily play and stop audio in response to scene events, touch and mouse events, and at specific points in time using timeline actions. For more information, please visit the audio & video section of our documentation. For more advanced control over audio, please continue reading. If you have a question not addressed in this topic, please create a new topic in this category. Starting Audio: Build Trust First Audio should (in most cases) be pla…

And here's a post specifically about muting:

Muting Audio or Video

Here’s how you can create a Mute button with JavaScript (roughly based on these instructions: http://www.w3schools.com/tags/av_prop_muted.asp) Select your audio or video element and adjust its ‘unique element ID’. You’ll need to target the unique element ID of each of your audio/video files. To mute an element on all scenes, you could set a variable with JavaScript when clicking the mute button that sets: var ismuted = true; The above JavaScript would be the function that is triggered when c…

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

[JimScott]

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

[cnagraphix (Cheryl)]

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.

[JimScott]

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.

[cnagraphix (Cheryl)]

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"

[JimScott]

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";
}

[cnagraphix (Cheryl)]

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.

[lydialmz (Lydia Lee)]

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!~!
This is my test hypedocument. musictest.zip (176.9 KB)

[MarkHunte]

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)

[MarkHunte]

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.

[woppywush]

how to play audio looping all the time?

[jonathan (Jonathan Deutsch)]

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:

HTML5 Audio Looping

[deboracameron]

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)