JS Play Concert!

#javascript30

by polaszk

HTML

<div class="keyboard">
  <span data-key-code="65" class="keyboard-btn">A</span>
  <span data-key-code="83" class="keyboard-btn">S</span>
  <span data-key-code="68" class="keyboard-btn">D</span>
  <span data-key-code="32" class="space keyboard-btn">Space</span>

  <audio data-key-code="65"><source src="https://freesound.org/data/previews/13/13699_18811-lq.mp3"></audio>
  <audio data-key-code="83"><source src="https://freesound.org/data/previews/361/361573_1754371-lq.mp3"></audio>
  <audio data-key-code="68"><source src="https://freesound.org/data/previews/109/109989_661496-lq.mp3"></audio>
  <audio data-key-code="32"><source src="https://freesound.org/data/previews/439/439895_2896196-lq.mp3"></audio>
</div>

CSS

.keyboard {
  background-image: url(https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-0.3.5&s=d8011e0a2bcb70c7697ba5e32a262100&auto=format&fit=crop&w=1350&q=80);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  padding: 300px 0 20px;
  text-align: center;
  overflow: hidden;
}

.keyboard-btn {
  display: inline-block;
  background-color: rgba(153, 153, 153, .3);
  text-align: center;
  padding: 16px 20px;
  border-radius: 3px;
  border: 1px solid black;
  margin: 0 10px;
  min-width: 53px;
  box-sizing: border-box;
  transition: 200ms;
}

.keyboard .space {
  display: block;
  width: 205px;
  margin: 15px auto;
}

.keyboard-btn.active {
  border-color: #000;
  transition: 200ms;
  transform: scale(.9);
  background-color: #ffffffcc;
}

JavaScript

const audioLibrary = document.querySelectorAll('audio');
const buttons = document.querySelectorAll('.keyboard-btn');

const playMusic = (evt) => {
  const evtKeyCode = evt.keyCode;

  addActiveClass(evtKeyCode);

  for (let audio of audioLibrary) {
    const audioKeyCode = parseInt(audio.dataset.keyCode, 10);
    if (evtKeyCode === audioKeyCode) {
      audio.currentTime = 0;
      audio.play();
    }
  }
};

const addActiveClass = (keyCode) => {
  for (let button of buttons) {
    const buttonKeyCode = parseInt(button.dataset.keyCode, 10);
    if (keyCode === buttonKeyCode) {
      button.classList.add('active');
      setTimeout(() => {
        button.classList.remove('active')
      }, 100);
    }
  }
};

document.addEventListener('keydown', playMusic);