JavaScript30-1

javascript로 드럼킷트 만들기(JavaScript Drum Kit)

목표: 키보드 키 누를 때 애니메이션효과 및 소리나게하기

과정

• 키 입력시 클래스추가 및 소리나게 작동
• 작동 종료 시점에 효과 remove

코드분석

  function playSound(e){
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
    if(!audio) return;
    audio.currentTime = 0; //키 재입력 시간설정(연속입력 가능하도록)
    audio.play();
    key.classList.add('playing');
    //console.log(key); 
  }

  function removeTransition(e){
    if(e.propertyName !== 'transform') return; //속성명에서 transform없으면 return
    console.log(this) //엘리먼트
    this.classList.remove('playing');
  }

  const keys = Array.from(document.querySelectorAll('.key')); //keys배열에 담고
  keys.forEach(key => key.addEventListener('transitionend', removeTransition)); //반복자 forEach사용해서 실행

  window.addEventListener('keydown', playSound);

알게 된 내용 & 찾아 본 내용:

1. forEach(): 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행(반복문)
   - 객체의 요소들이 callback 함수에 순서대로 호출됨
   - for문에 비해 좀 더 깔끔하고 직관적
   - for문은 continue나 break로 반복을 제어 할 수 있지만 forEach는 throw(예외)를 발생시키지 않으면 중간에 반복을 종료 할 수 없다.
   
2. <kbd> 태그: 키보드 입력을 지정 할 때
   
3. keydown: 키를 누를 때 작동(keyup: 키를 누르고 뗄 때 작동)
   
4. currentTime

참고

https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Array-forEach

결과물

https://ha0ha0.github.io/javascript30/1/index-START.html