01. JS Drum Kit

01. JS Drum Kit

data-key에 할당된 값을 가지고 값에 맞는 키보드를 눌렀을 때 오디오가 실행된다.

• 해당 오디오와 키보드의 키를 할당한 key에 data-key="" 을 넣어줍니다.

    <div class="keys">
    	<div data-key="65" class="key">
              <kbd>A</kbd>
              <span class="sound">clap</span>
          </div>
    </div>
    <audio data-key="65" src="sounds/clap.wav"></audio>

중간 script git commit

   <script>
        window.addEventListener("keydown", function (e){
           /*console.log(e);
           console.log(e.keyCode);*
            const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
            const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
            console.log(audio);
            //console.log(e.keyCode);

        });
    </script>

템플릿 문자열은 '' X ``로 감싸서 처리 ${ } 감싸기 가능

addEventListener :: 이벤트 등록, 여러개 이벤트 등록 가능

const :: 블록 범위의 상수 선언, 재 할당 X 재 선언 X

console.log에서 확인해야 할 부분

• keycode가 어떻게 들어오는지 확인하기.
• const로 지정한 것들이 제대로 값을 불러오는지 확인하기

마지막 script git commit

<script>

        function playSound(e){
            /*console.log(e);
           console.log(e.keyCode);*/
            const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
            const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
            //console.log(key); //잘 나오는지 확인하기

            if(!audio) return // 오디오가 아닌 경우 return;
            audio.currentTime = 0; // currentTime html에서 audio나 video를 재생할 때 재생시간위치를 정함
            audio.play();
            /*key.classList.add('playing');
            key.classList.remove('playing');*/
            //key.classList.toggle('playing');
            key.classList.add('playing');
            //.key.playing add

        }

        function  removeTransition(e){
            //console.log(e);  //>> propertyName을 확인하는 것,,,? 이건 설명을 더 찾아봐야겠다.?????
            if(e.propertyName !== 'transform') return;
            //console.log(this); //받는 this가 뭔지 확인가히
            this.classList.remove('playing');
        };

        //nodeList는 배열이 아니래
        const keys = document.querySelectorAll(`.key`);
        //addEventListener 지정한 이벤트가 대상에 전달될때 마다 호출할 함수를 설정한다.
        keys.forEach(key => key.addEventListener('transitionend', removeTransition));
        //forEach 배열에 활용함
        //=> 화살표함수 key에 key의 이벤트 리스너 실행 된 것을 담는 것


        window.addEventListener("keydown",playSound);
    </script>