Configurable Dice Cup Sound Effect for HTML5 Game

Question

I am developing an HTML5/javascript based game, where the players will have to roll virtual dice. I am working on a 3d model of a dice Cup and plan on having the users shake it and turn it upside down in order to roll the dice. I would like some realistic sound effects to go along with this interaction, but do not know how to achieve this. The problem is that the number of dice, the duration, intensity and speed of the dice cup shake will vary. Consequently, I don't think I will be able to create a convincing sound experience by using a prerecorded sound effect. How does one deal with making such sound effects configurable?Would I need to programmatically generate the sound using the web audio API? If so I would be grateful for any pointers as to how to do it.

Answer 1

The easy way out

You can always (assuming there is a maximum number of dice in a cup) record multiple sounds (one for one dice, two for two dice, etc.), then play them with the volume lower or higher depending on the shake strength.

Depending on your experience and time, I'd go for this solution. It's easy to implement and because you're not actually simulating / showing the inside of the cup, probably good enough.

---

Generating the sound

If you're set on generating realistic sounds (or at least more / different sound when more dice are present), I'd suggest you use the AudioContext JavaScript API and 'simulate' the dice sounds inside the cup.

Depending on the reality that you require, you can do something like this:

• For each dice in the cup, add an audio node with the sound of a dice hitting the cup side (thud). These can be played at semi-random intervals.
• For each dice pair, add an audio node with the sound of the dice hitting each other (clicking). 'For each dice pair' might be a little much, so try different number of nodes. These can also be played semi-randomly.

The trick here is to determine when to trigger a sound node (semi-randomly). This is really a trial-and-error thing, but shouldn't be too hard (and since you're not simulating the inside of the cup, you can keep it easy).

Then, with the shaking strength, adjust the volume of these nodes. You can do this by connecting them to a gain node and setting the gain lower or higher depending on the shake strength.

For the 'fade out' effect (that is, when you shake a cup with dice, and stop, the dice keep bouncing for a little while longer), you can manipulate the gain node to fade out after some time (or use a function for a smoother curve). Of course, triggering less and less audio nodes makes it even more realistic.

Afterwards...

You can even use this system after the dice leave the cup; triggering clicking when dice hit each other (you simulate this, so you know when to trigger those nodes) while rolling from the cup on to the board.

Hitting the board requires some more nodes with a sound, but this works the exact same way.

More on AudioContext

The AudioContext API has a lot of other neat features for manipulating the sound, and I'm sure you can hook up some nodes that actually create the 'duller' sound of dice in a cup. That means you can actually record the sound of dice yourself and simply use the API to modify them in code.

I highly recommend you check out this HTML5 rocks article, which explains the details of what I've written here (with images! And live examples!). In case this is all a little much, you can always use a library; there are plenty to go around. Depending on the abstraction it provides, the points above still apply.

---

Hybrid solution

You could use the pre-recorded audio when shaking the cup, and actually generating (with AudioContext) the sound when you simulate the throw. This has the advantage that the audio exactly matches the physical simulation, and keeps the system simpler because you're not writing an audio simulation for the dice shaking in a cup (which you can't see anyway).