Javascript30 - 키보드 드럼

Javascript로 키보드 드럼 만들기

Vanilla Javascript를 이용하여 키보드에 해당 키가 눌렸을때 특정 드럼 사운드가 플레이 되는걸 구현하였습니다.

HTML

키보드를 눌렀을때마다 해당 keyCode가 존재한다
keyCode를 data-key에 넣고 해당 keyCode에 키보드가 눌렸을때
audio에도 동일한 data값을 확인하고 플레이 시킨다.

keyCode를 확인 할 수 있는 사이트

<div class="keys">
    <!-- data-key => keycode -->
    <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 data-key="65" src="sounds/clap.wav"></audio>
  <audio data-key="83" src="sounds/hihat.wav"></audio>
  <audio data-key="68" src="sounds/kick.wav"></audio>
  <audio data-key="70" src="sounds/openhat.wav"></audio>
  <audio data-key="71" src="sounds/boom.wav"></audio>
  <audio data-key="72" src="sounds/ride.wav"></audio>
  <audio data-key="74" src="sounds/snare.wav"></audio>
  <audio data-key="75" src="sounds/tom.wav"></audio>
  <audio data-key="76" src="sounds/tink.wav"></audio>

Javascript

transitionend 이벤트 참고 사이트
https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event

<script>
    window.addEventListener('keydown', (e) => {
      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
      const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
      if(!audio) return alert('해당하는 사운드가 없습니다');
  
      audio.currentTime = 0; // 처음부터 재생하기 위해 0
      audio.play(); // 사운드 재생
      key.classList.add('playing');
    });
  
    // 클래스명 key에 playing 클래스 지우기
    function removeTransition(e) {
      if(e.propertyName !== 'transform') return; // transform이 없을경우 return
      this.classList.remove('playing');
    }
  
    const keys = document.querySelectorAll('.key');
    keys.forEach(key => {
      // transitionend 이벤트는 css transition이 완료되면 발생한다
      key.addEventListener('transitionend', removeTransition);
    })
  </script>

결과