Adding sounds to colliding objects

Hello, I have this simple pool-like game with 3 pockets.

This will be an iPad app, so users will need to use their finger (in this case the cursor) to throw the big red ball around to get the little balls inside the 3 pockets, similar to a game of pool but without the stick.

It works pretty well, but I need the following:

  1. Add sound FX every time the balls collide or bounce
  2. Add a sound effect every time user interacts and drags the big ball
  3. Add a different sound FX every time one little ball goes inside one of the 3 pockets
  4. Play a timeline once all the 10 balls are gone, to indicate that the game has ended

Any help with be appreciated!

Stay Safe!


So the answer you're looking for is probably in the "Jump" template...

It has collision detection. When a sensor is over a platform, it changes a variable, permitting jumps. But instead of doing that, you could play a timeline that has a sound. For greater control, maybe use Howler.js to manage audio.

Thank you for this. Yes, I had seen this template, but there’s multiple java scripts that are way too complicated and my JS skills are not sufficient to figure out how to modify it.

Ha ha, it is true. The template is a bit involved. Explaining it is a substantial part of the book. Yet, you can focus on the parts you need.

There are three JavaScript files in the document...

  • fps
  • swipe
  • jump that's a great way to start. You're not worried about Frames Per Second or Swipe Controls. You're only focusing on collision detection.

So, once you look at the "jump" script, you can skip large chunks of code. Variables?! You don't care. It's a different project. The zoom function? Again, you don't care, It's a different project.

The Physics API... well... you might care.

This is known as the Photics-Physics-Bridge. While it looks super confusing, it's actually meant to make it easier to use the API. But right now... you don't have to care, as I wasn't able to simplify (at least not yet) the collision code into the PPB.

Instead, focus on line 177. That's for running code when a collision event starts.

Note — It also has a friend at line 237, that's for running code when a collision ends. You probably don't need that, so you can draw your focus on the block of code at 177-235

Basically, there are collision pairs — there are always two... no more... no less. So you have to identify those pairs. I do this with "custom data attributes".

If "bodyA" is a sensor and "bodyB" has the "data-ground" attribute, then the condition is "True" it's OK to jump.

Look at the comments... // A to B ...and... // B to A ...the pairs are scanned twice, so that a collision event is not missed.

Sure, there's a lot more to it. That's why I'm writing the book... 500 pages HA HA ...but that's basically the idea. Instead of changing the value of "window.ground" to true, load up Hower.js to play some sounds, or use Hype's API to play a scene with a sound. (I recommend the former.)

Is that better?

1 Like

I really appreciate this! I’ll give it a try and let you know. Thanks!

Here is also a snippet concerning your request with a little demo. As its Matter.js based it should be probably pretty similar to the previous mentioned method.

is looks very promising indeed. I’ll let you know how it goes. Thank you!

HI Max, so this worked replacing some variables to:

     var aElm = new Audio("${resourcesFolderName}/chime.mp3");
    var bElm = new Audio("${resourcesFolderName}/chime2.mp3");
	// Just to test... show some feedback;;

The problem is Hype can’t seem to handle playing audio with collisions. It technically works, but because so many play instances are happening at the same time performance is heavily affected, the game becomes jerky and becomes unplayable.

You can check the result here:

Thanks for the script though, it will be useful for other games I"m sure

Reduce the Count of collisions, May be by a Timer that blocks collisions of the Same pair for a Fee milliseconds. Try to use Howler that can Play sequenses of one Audiofile. All in all try to reduce Things to make it playable …

You can use a third party audio library


use these extensions that allows loading the same sound multiple times after the fact. I’d load the collision sound using the id of the object colliding.

Make sure to unload and garbage collect if you use the method:

In the collision routine you must have to participants. Using the first one (aElm) only should suffice. Untested code… just a concept.

if(hypeDocument.customData[] == null) {
    hypeDocument.customData[] = hypeDocument.loadSound('soundfile',;

Also, it’s good practise to look if a sound is already playing and to avoid restarting it. That only works when buffering the reference to the Audio resource. The sound snippet is pretty ancient. Using the new Audio should also do the trick if you buffer the reference. I can’t remember why I actually attached the Audio as a node back then. There certainly was a reason.

Update: Yes, it was IE9. See the compatibility list The new Audio() interface works starting IE10 but the element is supported by IE9 already. So, basically you should be fine using the Audio constructor but buffering it. That way you can also check if its running also make sure to only start it on of the elements per collision

THANK YOU Max, I will give that a try!

Hi Max I tried to complete a very simple collision sound example but I did something wrong for sure. (42.3 KB)

I use custom behavior (49,7 KB)

The loadSound approach requires a loadSound function, as that is not part of the API

1 Like

Perfect! Thank you! I tried to manipulate the trigger for specific objects buy I'm quite sure I did some mistakes on punctuation... (49.9 KB)

Here a possible solution to let the same object trigger different sounds. I hope this will also help others searching for a similar situation. (66.4 KB)

1 Like