Drum Kit

<!DOCTYPE html>

<html>
  <head>
    <title>Drum Kit</title>

    <link rel="stylesheet" href="./styles.css"/>
  </head>

  <body>
    <div class="keys">
      <div data-key="65" class="key">
        <kbd>A</kbd>
        <span class="name">boom</span>
      </div>
      <div data-key="83" class="key">
        <kbd>S</kbd>
        <span class="name">clap</span>
      </div>
      <div data-key="68" class="key">
        <kbd>D</kbd>
        <span class="name">hihat</span>
      </div>
      <div data-key="70" class="key">
        <kbd>F</kbd>
        <span class="name">kick</span>
      </div>
      <div data-key="71" class="key">
        <kbd>G</kbd>
        <span class="name">openhat</span>
      </div>
      <div data-key="72" class="key">
        <kbd>H</kbd>
        <span class="name">ride</span>
      </div>
      <div data-key="74" class="key">
        <kbd>J</kbd>
        <span class="name">snare</span>
      </div>
      <div data-key="75" class="key">
        <kbd>K</kbd>
        <span class="name">tink</span>
      </div>
      <div data-key="76" class="key">
        <kbd>L</kbd>
        <span class="name">tom</span>
      </div>
    </div>

    <script src="./scripts.js"></script>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: url('./bg.jpg');
  background-size: cover;
  background-position-y: bottom;
  display: flex;
}

.keys {
  width: 70vw;
  margin: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.key {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 70px;
  min-height: 70px;
  background: rgba(0, 0, 0, .6);
  margin: 5px 7.5px;
  color: #fff;
  font-size: 27px;
  border: 3px solid #000;
  transition: background .07s ease-in-out;
}

.key.active {
  background: rgba(255, 0, 0, .5);
  transition: background .07s ease-in-out;
}

.key .name {
  font-size: 14px;
  color: #ff0;
}

function play(e) {
  let key = document.querySelector(`[data-key="${e.keyCode}"]`),
      fileName = key.childNodes[3].innerText,
      audio = new Audio(`sounds/${fileName}.mp3`);

  if (!key) return;

  key.classList.add('active');
  audio.play();
}

function removeActive(e) {
  let key = document.querySelector(`[data-key="${e.keyCode}"]`);
  key && key.classList.remove('active');
}

document.addEventListener('keydown', play);
document.addEventListener('keyup', removeActive);