<h2>Adding Sounds in Crafty</h2>
<div id="crafty-game"></div>

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lato';
  margin: 20px auto;
  width: 600px;
  text-align: center;
}

h2 {
  margin: 20px 0;
}

#crafty-game {
  border: 1px solid black;
}

var stageWidth = 600;
var stageHeight = 260;
var gameScore = 0;

Crafty.init(600, 260, document.getElementById('crafty-game'));

var game_assets = {
  "sprites": {
    "http://opengameart.org/sites/default/files/preview_383.png": {
      tile: 133,
      tileh: 36,
      map: {
        yellow_btn: [2, 3]
      }
    }
  },
  "audio": {
    "music_one": ["http://opengameart.org/sites/default/files/audio_preview/%5E.ogg.mp3"],
    "gun_shot": ["http://opengameart.org/sites/default/files/audio_preview/8bit_gunloop_explosion.wav.mp3"]
  }
};

Crafty.load(game_assets);

var playBtn = Crafty.e("2D, Canvas, Mouse, yellow_btn").attr({
  x: 10,
  y: 30,
  w: 133,
  h: 36
});

var playText = Crafty.e("2D, Canvas, Text").textFont({ size: '14px', weight: 'bold' }).attr({
  x: 55,
  y: 40
}).text("Music");

var playAllBtn = Crafty.e("2D, Canvas, Mouse, yellow_btn").attr({
  x: 10,
  y: 100,
  w: 170,
  h: 36
});

var playAllText = Crafty.e("2D, Canvas, Text").textFont({ size: '14px', weight: 'bold' }).attr({
  x: 50,
  y: 110
}).text("Play All Audio");

var pauseMusicBtn = Crafty.e("2D, Canvas, Mouse, yellow_btn").attr({
  x: 10,
  y: 170,
  w: 170,
  h: 36
});

var playMusicText = Crafty.e("2D, Canvas, Text").textFont({ size: '14px', weight: 'bold' }).attr({
  x: 50,
  y: 180
}).text("Pause Music");

var pauseGunshotBtn = Crafty.e("2D, Canvas, Mouse, yellow_btn").attr({
  x: 200,
  y: 170,
  w: 170,
  h: 36
});

var playGunshotText = Crafty.e("2D, Canvas, Text").textFont({ size: '14px', weight: 'bold' }).attr({
  x: 235,
  y: 180
}).text("Pause Gunshot");

var muteBtn = Crafty.e("2D, Canvas, Mouse, yellow_btn").attr({
  x: 200,
  y: 100,
  w: 160,
  h: 36
});

var muteText = Crafty.e("2D, Canvas, Text").textFont({ size: '14px', weight: 'bold' }).attr({
  x: 240,
  y: 110
}).text("Mute Audio");

var unmuteBtn = Crafty.e("2D, Canvas, Mouse, yellow_btn").attr({
  x: 410,
  y: 100,
  w: 160,
  h: 36
});

var unmuteText = Crafty.e("2D, Canvas, Text").textFont({ size: '14px', weight: 'bold' }).attr({
  x: 445,
  y: 110
}).text("Unmute Audio");

var gunBtn = Crafty.e("2D, Canvas, Mouse, yellow_btn").attr({
  x: 200,
  y: 30,
  w: 160,
  h: 36
});

var gunText = Crafty.e("2D, Canvas, Text").textFont({ size: '14px', weight: 'bold' }).attr({
  x: 245,
  y: 40
}).text("Gun Shot");

var tGunBtn = Crafty.e("2D, Canvas, Mouse, yellow_btn").attr({
  x: 410,
  y: 30,
  w: 160,
  h: 36
});

var tGunText = Crafty.e("2D, Canvas, Text").textFont({ size: '14px', weight: 'bold' }).attr({
  x: 440,
  y: 40
}).text("Gun Shots - 10");

playBtn.bind('Click', function() {
  Crafty.audio.play("music_one");
});

playAllBtn.bind('Click', function() {
  Crafty.audio.play("music_one", -1);
  Crafty.audio.play("gun_shot", -1, 0.2);
});

pauseMusicBtn.bind('Click', function() {
  Crafty.audio.pause("music_one");
});

pauseGunshotBtn.bind('Click', function() {
  Crafty.audio.pause("gun_shot");
});

muteBtn.bind('Click', function() {
  Crafty.audio.mute();
});

unmuteBtn.bind('Click', function() {
  Crafty.audio.unmute();
});

gunBtn.bind('Click', function() {
  Crafty.audio.play("gun_shot");
});

tGunBtn.bind('Click', function() {
  Crafty.audio.play("gun_shot", 10);
});

//Crafty.audio.play("music_one");