How to make a toggle button to toggle Audio Mute?


#1

Hi everybody.

Is there any issue to build a toggle button ? I mean, I’d like to get an audio playPause button to mute or play a sound. I cannot find any show/hide action inside Actions panel. Also, using timeline to desabble a button seems not working very well (using screen css option).
Thanks.

(sorry for my quite bad english)


#2

Bonjour! - at least here in California

The following code in the function “playPauseBtnToggle” uses the jQuery JavaScript Library which is placed in the “Head HTML” of the Hype document:

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

Description:
• Clicking the “Play” button hides it and shows the “Pause” button, plays the sound.
• Clicking the “Pause” button hides it, and shows the “Play” button, pausing the sound.
• Each button calls the following function “playPauseBtnToggle” when clicked on.
“yourSoundTrack” is the name of your audio file.

function playPauseBtnToggle(hype document, element, event) {
$("#Pause_Btn").toggle(); // toggle "Pause" button visibility (jQuery code)
$("#Play_Btn").toggle(); // toggle "Play" button visibility (jQuery code)

var isPlaying = document.getElementById("yourSoundTrack");		
(isPlaying.paused) ? isPlaying.play() : isPlaying.pause(); // ternary operator
}

**Later Edit:** If You wanted to make the line that does the actual "Play & Pause": `(isPlaying.paused) ? isPlaying.play() : isPlaying.pause();` accessible to other elements in this particular scene, You could put the following code in the "On Scene Load" handler in the Scene Panel:
function audiosetUp(hypeDocument. element, event) {
	window.isPlaying = document.getElementById("yourSoundTrack");
}

This function makes creates a global variable called “isPlaying”.

Now by just inserting the line
(isPlaying.paused) ? isPlaying.play() : isPlaying.pause();
in other functions in this scene You can pause and play “yourSoundTrack”.


The code for the function that the Play & Pause buttons use would now be:

 function playPauseBtnToggle(hypeDocument. element, event) {
	$("#Pause_Btn").toggle();
	$("#Play_Btn").toggle();	
	(isPlaying.paused) ? isPlaying.play() : isPlaying.pause();
}

The line from my first example (before the “Later Edit”):
var isPlaying = document.getElementById("yourSoundTrack");
is no longer necessary.

This second example is slightly more involved than the first, but offers more utility.


(Mark Hunte) #3

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)


#4

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.


(Mark Hunte) #5

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


(Cheryl) #6

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.


#7

Hi Cheryl!

Just answered this question a few hours ago…


(Cheryl) #8

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.


(Cheryl) #9

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.


#10

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.


Mute embeded video whith buttom
#11

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

(Cheryl) #12

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.


#13

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.


(Cheryl) #14

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"

#15

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

(Cheryl) #16

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.


(Lydia Lee) #17

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)


About the the audio control and the button's style
(Mark Hunte) #18

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)


(Mark Hunte) #19

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.


#20

how to play audio looping all the time?