JS - Drum Kit

1. Drum Kit

HTML구조

  <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 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>

🥑 첫번째 내가 구현한 화면

<script>
  const key = document.querySelector('.key');

  const chgBox = () => {
    key.classList.add('playing');
    key.classList.add('sound');
  }
  const removeBox = () => {
    key.classList.remove('playing');
    key.classList.remove('sound');
  }

  key.addEventListener("mouseover",chgBox);
  key.addEventListener("mouseout",removeBox);
</script>

A 만 구현되고 나머지는 전부 구현이 되지 않는다 -> this를 사용해야 할 것 같은데..라고 고민했는데 알고보니 내가 문제 이해를 잘못했다. 마우스에대한 이벤트가 아니라 키보드의 키 값을 받아서 화면에 나온 알파벳을 입력했을 때 data-key로 연결되어 있는 audiotag와 연동이 되서 해당 사운드라 울려야 하고, 동시에 CSS transition효과를 주어야 하는 문제였다.

📌 포인트

• keydown 이벤트 사용 - 키보드의 값이 입력되어야 한다.
• e.keyCode : 키 값(value)입력 받기
• keycode.info 사이트를 통해 키보드를 입력했을 때의 값을 알 수 있다.
• audio.play() 메서드 : 음악재생
• transitionend() 이벤트 : transition이 완료된 이후 발생하는 이벤트, transition완료를 감지함, transition과 함께 사용한다. -> addEventListener를 사용하여 이벤트 모니터링가능
  
  

🥑 재구현해보기

1) 첫번째로 어디에 이벤트를 주어야 할것인가?

• window에 주어야 전체 화면에서! 키보드를 누르기만하면 어디서든 이벤트가 발생하게 하려고

2) data-key라는 속성값은 어떻게 표현해야 할까?

• [] 와 Backtick(``)표기법 사용

3) ①에서 콘솔창을 확인해보면 객체 형태로 출력이 되는 것을 확인할 수 있다.
+) 내가 입력한 바로 그 키보드의 키 값(value)를 받기 위해 e.keyCode 사용!

4) ③에서 오디오를 실행시켜보고 키보드를 누르면 특정 키보드 입력 값에 따라 오디오가 나온다.
✅문제점 발생 !! : 연속해서 키보드를 눌렀을때, 오디오 재생에 로딩이 걸린다.

5) 이러한 문제점을 해결하기 위해 currentTime 속성을 사용한다.

6) 이제 css 애니메이션효과를 적용해보자
class명이 'key'인 박스들 안에 키보드 입력창이 입력되어 있다.
따라서 이 .key를 변수로 설정한다.

⑤번에서 const key의 콘솔을 찍어보면, 키 값(숫자값)이 정상적으로 나오고 있음을 확인할 수 있다.

7) 이 key라는 변수에 class를 추가해주면 border가 노란색인 박스 형태가 구현됨을 볼 수 있다.

8) ✅문제점 발생!! : removeClass는 어떻게 주어야 하나?
→ 조건: transition효과가 모두 끝나고 class가 즉, 노란색 borderline이 사라져야 한다.
→ 따라서 transitionend 메서드를 사용한다. 👉 함수로 만들어서 사용

window.addEventListener(e){
  //console.log(e) ........①
  //const audio = document.querySelector('audio');
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  //console.log(audio) ........②
  
  if(!audio) return; //audio값을 받을 수 없는 키 값이 출력된 경우 멈춰!
  audio.currentTIme = 0; //.......④ 오디오 / 비디오 재생의 현재 위치 반환하는데 그 반환하는 위치를 0으로 설정한것!
  audio.play(); //............③
  //////////////////////////////////////////
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  //console.log(key);    ............⑤
  key.classList.add('playing');
  
  //⑦클래스 제거함수 만들기
  function removeTransition(e){
    //console.log(e); //
    if(e.propertyName !== 'transform'){
   // console.log(e.propertyName); //transform - h 키를 눌렀을 때, data-key가 있는 값이므로 정상출력
      //console.log(this); //this = keys
      this.classList.remove('palying');
    }
    
   const keys = document.querySelectorAll('.key');
    //console.log(keys)  .......⑥유사배열객체 형태로 반환 , 그 중 e.propertyName이 transition의 속성을 나타내고 있음을 확인
    
    //⑧
    keys.forEach((key) => key.addEventListener('transitionend', removeTransition));
}

정상적으로 작동한다!

참고: transitionend_Event
참고2: dataset