비전공자 개발일기

Javascript Drum 본문

Javascript

Javascript Drum

HiroDaegu 2021. 9. 8. 00:35
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drum</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>

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

  <audio src="sounds/clap.wav" data-key="65"></audio>
  <audio src="sounds/hihat.wav" data-key="83"></audio>
  <audio src="sounds/kick.wav" data-key="68"></audio>
  <audio src="sounds/openhat.wav" data-key="70"></audio>
  <audio src="sounds/boom.wav" data-key="71"></audio>
  <audio src="sounds/ride.wav" data-key="72"></audio>
  <audio src="sounds/snare.wav" data-key="74"></audio>
  <audio src="sounds/tom.wav" data-key="75"></audio>
  <audio src="sounds/tink.wav" data-key="76"></audio>


</body>

</html>
function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)

  // console.log(audio)
  if (!audio) return;
  audio.currentTime = 0;
  audio.play();

  // console.log(key)
  key.classList.add('playing');
}

function removeTransition(e) {
  if (e.propertyName !== 'transform') return;
  this.classList.remove('playing')
}

const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

window.addEventListener('keydown', playSound)
728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript Clock  (0) 2021.09.10
Javascript Calendar  (0) 2021.09.09
Javascript Convert Rank + Calculate score  (0) 2021.09.07
Javascript bubble & selection & insertion sort  (0) 2021.09.05
Javascript For loop - tree  (0) 2021.09.04
'Javascript' Related Articles more