DRUM PAD

orginal http://codepen.io/rauldronca/pen/YGkykv

by Mateusz

HTML

<h1>DRUM PAD</h1>

<div class="pad">
  <div class="box pad-1" data-code="82">R</div>
  <div class="box pad-2" data-code="84">T</div>
  <div class="box pad-3" data-code="89">Y</div>
  <div class="box pad-4" data-code="85">U</div>
  
  <div class="box pad-5" data-code="70">F</div>
  <div class="box pad-6" data-code="71">G</div>
  <div class="box pad-7" data-code="72">H</div>
  <div class="box pad-8" data-code="74">J</div>
  
  <div class="box pad-9" data-code="86">V</div>
  <div class="box pad-10" data-code="66">B</div>
  <div class="box pad-11" data-code="78">N</div>
  <div class="box pad-12" data-code="77">M</div>
</div>

CSS

@import "https://fonts.googleapis.com/css?family=Oswald";
html, body {
  background: -webkit-linear-gradient(right, #fd746c, #ff9068);
  background: linear-gradient(to left, #fd746c, #ff9068);
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  font-family: 'Oswald', sans-serif;
}

h1 {
  color: #fff;
  font-size: 5vw;
  letter-spacing: 6px;
}

.pad {
  width: 500px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.box {
  width: 100px;
  height: 100px;
  margin: 10px 0;
  box-shadow: 0 8px 6px -6px black;
  background-color: #444;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.4);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.box:hover {
  background-color: #5e5e5e;
  cursor: pointer;
}
.box:active {
  background-color: #2b2b2b;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
 ...

JavaScript

$(document).ready(function() {

  var padOne = new Audio('http://cdn.online-convert.com/example-file/audio/mp3/example.mp3');
  $('.pad-1').mousedown(function() {
    padOne.load()
    padOne.play();
  });

  var padTwo = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/SD0010.mp3');
  $('.pad-2').mousedown(function() {
    padTwo.load();
    padTwo.play();
  });

  var padThree = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/SD0000.mp3');
  $('.pad-3').mousedown(function() {
    padThree.load();
    padThree.play();
  });

  var padFour = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/RS.mp3');
  $('.pad-4').mousedown(function() {
    padFour.load();
    padFour.play();
  });

  var padFive = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/OH25.mp3');
  $('.pad-5').mousedown(function() {
    padFive.load();
    padFive.play();
  });

  var padSix = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/MA.mp3');
  $('.pad-6').mousedown(function() {
    padSix.load();
    padSix.play();
  });

  var padSeven = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CY0010.mp3');
  $('.pad-7').mousedown(function() {
    padSeven.load();
    padSeven.play();
  });
  
  var padEight = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CH.mp3');
  $('.pad-8').mousedown(function() {
    padEight.load();
    padEight.play();
  });

  var padNine = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CB.mp3');
  $('.pad-9').mousedown(function() {
    padNine.load();
    padNine.play();
  });
  
  var padTen = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/BD0010.mp3');
  $('.pad-10').mousedown(function() {
    padTen.load();
    padTen.play();
  });
  
  var padEleven = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/BD0000.mp3');
  $('.pad-11').mousedown(function() {
    padEleven.load();
    padEleven.play();
  });
  
  var padTwelve = new...