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.
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.
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
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.
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
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.
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.
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):
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.
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)
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)