Adding Sounds to buttons, and the scenes
Seth

Hello, first I want to thank Gio for all his help! Second, I am trying to add music to my project. I have put in a file called Jungle_Loop.ogg by adding it to the Audio tab, but it does not work when I test it. Also, I've been trying to add a sound for a onMouseDown button event, but I can't figure out how to do that either. It would also be nice to make a mute button for the background music. Any help would be greatly appreciated, thanks in advance!

 

UPDATE:

 

After I posted this, I was able to find this handy video: https://www.youtube.com/watch?v=TCDtrBrDut8

It answered almost all of my questions. Now I am wondering why we use the onClick instead of onMouseDown function. Will the onClick function like the onMouseDown on mobile devices? Also, I still don't know how to mute the music.

 

I have tried using wade.stopAudio("bgmusic.ogg"); but that doesn't work. It does work if I use wade.stopAudio(); But then it stops all the audio even my button clicks, so that won't work either. I would also like to swap the image when its turned on and off.

 

Again, any help would be greatly appreciated. Thanks

All 7 Comments
Gio

Hi

Sorry for the slow reply, we're all on holiday this week. You have figured out the first bit anyway.

When you play a sound you get a unique id that you can use to stop it later.
 

var mySound = wade.playAudio('Jungle_Loop.ogg');wade.stopAudio(mySound);

Regarding your other question, onClick fires when a user clicks or taps somewhere, then releases the mouse / finger in the same area.

This area is 4 pixels large by default, you can change that with wade.setClickTolerance()

Seth

Thanks for the reply Gio. I replaced wade.playAudioIfAvailable("Jungle_Loop.ogg", true); with var mySound = wade.playAudio('Jungle_Loop.ogg'); and that works. However, when I add this to my mutebutton onClick: wade.stopAudio(mySound); it doesn't stop the music. Not sure what I'm doing wrong. Another problem I am having, I play the music when an object in scene1 is added to the scene, and I have a back button on all other scenes that leads back to scene1. So, after it loads the first time, if I go back from another scene, it will load again, so it sounds awful. One more thing, I can't figure out how to swap my mute button for my unmute button, when it is clicked, is there a quick way to do this? Thanks again for all your help Gio.

Gio

Hi

 

It's a bit difficult to say without looking at your code, but my guess is that it's a problem with the scope of your mySound variable - it may not be defined where you call wade.stopAudio().

 

Try storing your variable in the wade.app object instead. This would also address your other problem. So to play your sound:

if (wade.app.mySound){    wade.stopAudio(wade.app.mySound);}wade.app.mySound = wade.playAudio('Junge_Loop.ogg');

And in your mute button:

wade.stopAudio(wade.app.mySound);

To swap buttons, you could hide one object and show another object. Is that what you meant?

Seth

As Always, you hit the nail on the head Gio! That fixed both my problems, the music now stops when the mute button is clicked, and doesn't replay when I go back to that scene. Thank You!

 

On the button swap subject; I guess hiding the mute button and showing the unmute button would do the trick. How would I go about doing this? Would it be an onClick or onMouseDown event? Would it be something like this? 

wade.getSceneObject('mutebutton').setVisible(false); wade.getSceneObject('unmutebutton').setVisible(true);

Again, I just want to say thank you Gio for all your help. I am sure it can be frustrating with all these newbie questions. You sir, have definitely earned a spot in the credits, right alongside the Powered by WADE (www.clockworkchilli.com). HAPPY HOLIDAYS!

 

UPDATE:

 

The above is exactly what I did, and it worked, but when I merge these 2 objects into another scene, they still work, but If it was already muted or not, it shows the mute button. How could I show the right button?

 

Is there a way to set audio volume on load for each sound?

 

Also, how do I show the splash screen on load? Do I need to make one, and then load it first in app.js?

Gio

Hi

 

Glad it worked. Don't worry about asking questions, it's normal - you have to start somewhere and I'm happy to help.

 

I think you want to store the current mute state somewhere that is accesible from multiple scenes, in the wade.app object for example. So when you mute, you set wade.app.mute to true and when you unmute you set wade.app.mute to false.

 

Then when you load your scene, for example in the unmutebutton's onAddToScene function, you could do:

setTimeout(function(){    wade.getSceneObject('mutebutton').setVisible(!wade.app.mute);    wade.getSceneObject('unmutebutton').setVisible(wade.app.mute);}, 0);

I am using a setTimeout with a value of 0 to make sure that both the mutebutton and the unmutebutton have been added to the scene when the above code is executed. If you know that the mute button is definitely added before the unmute button, then you don't need the setTimeout if you're doing this in the unmutebutton's onAddToScene function. I hope it makes sense :)

 

To set the volume, there isn't currently a way to easily do that. This is because WADE supports audio through WebAudio on devices that support it, but falls back to HTML Audio on devices that don't have WebAudio support. With plain HTML Audio there isn't a reliable cross-browser way of changing the volume of each sound. However you could manually access the WebAudio context through wade.getWebAudioContext() and do it manually from there (not too straightforward but possible, there is an explanation here). This won't work on devices that don't have WebAudio support.

 

In a future version of WADE we're going to drop support for plain HTML audio and we're going to have many more ways of controlling your sounds through the WADE API.

 

For the splash screen, you could do what you said above, or you could use wade.setLoadingImages() to set an image to display when loading.

Seth

Hi

 

Glad it worked. Don't worry about asking questions, it's normal - you have to start somewhere and I'm happy to help.

 

I think you want to store the current mute state somewhere that is accesible from multiple scenes, in the wade.app object for example. So when you mute, you set wade.app.mute to true and when you unmute you set wade.app.mute to false.

 

Do you mean the app.js file? If so, what would the code look like, something like this:

wade.app.mute(true);wade.app.unmute(false);

I'm not sure I understand what you mean.

Gio

I meant that in the same place where you currently mute your sounds (presumably your muteButton's onClick event), you could do:

wade.app.mute = true;

And when you unmute (in unmuteButton's onClick?) you can do:

wade.app.mute = false;

To be clear, mute is not a variable that would normally exist within the wade.app object, it's just something that you could add to that object in this case, so it persists across different scenes.

Post a reply
Add Attachment
Submit Reply
Login to Reply