Sound

Our ball can bounce ... but it is so quiet in here. Real balls make a sound when they bounce; so should ours!

I have embedded some <audio> tags in the html source code, and made the sound files available as indicated. They look something like the following:

<audio id="wall_sound" preload>
  <source src="../sounds/tock.wav" type="audio/x-wav">
  <source src="../sounds/tock.ogg" type="application/ogg">
  <source src="../sounds/tock.mp3" type="audio/mpeg">
</audio>

The reason for including three copies, in different formats, of the same sound file, is that various browsers (with the exception of Chrome) only support one or two of the above formats without additional plugins, and no format is supported by all the browsers. By including all three formats, individual browsers can find one they support.

I should add that I used Audacity to convert the original file into the other two formats.

Although I have not tried it, according to html5media, it is possible to avoid having to do this by linking to their library; you may want to have a look.

var game;
var ball;
var current_sound;

function play_sound(sound_id) {
    current_sound = $(sound_id)[0];
    current_sound.play();
}

Ball.prototype.move = function(height, width) {
  var delta;

if (this.x + this.dx + this.r > width) {
    delta = this.x + this.dx + this.r - width;
    this.x = width - delta - this.r;
    this.dx = - this.dx;
    play_sound("#wall_sound");
  }
  else if ( this.x + this.dx - this.r < 0) {
    delta = this.x + this.dx - this.r;
    this.x = - delta + this.r;
    this.dx = - this.dx;
    play_sound("#wall_sound");
  }
  else {
    this.x += this.dx;
  }

if (this.y + this.dy + this.r > height) {
    delta = this.y + this.dy + this.r - height;
    this.y = height - delta - this.r;
    this.dy = - this.dy;
    play_sound("#wall_sound");
  }
  else if ( this.y + this.dy - this.r < 0) {
    delta = this.y + this.dy - this.r;
    this.y = - delta + this.r;
    this.dy = - this.dy;
    play_sound("#wall_sound");
  }
  else {
    this.y += this.dy;
  }
};

function init() {
  game = new Game();
  ball = new Ball(50, 150, 10, 2, 4, game.ctx);
  ball.draw();
}

function update() {
  game.clear_canvas();
  ball.move(game.height, game.width);
  ball.draw();
}

init();
game.loop(update);

Note

I used this sound file from Freesound to create the bouncing sound. I had to edit it and make it shorter as it sometimes would not be heard if two collisions occurred within a short time frame.

Experiment!

Try it! You may notice that the speaker button seems to do nothing... We'll do something about that soon.

previous next

Reeborg

Programming tutorials

Note

Experiment!