🥁 JS Drum Kit 🥁

첫 번째 주제는 간단한 드럼 키트를 자바스크립트로 구현하는 것.

A, S, D, F, G, H, J, K, L 키를 하나씩 누를 때마다 드럼 소리가 재생된다. 🥁🥁

주제들이 생각보다 간단한 걸 보니, 하루에 하나씩 가볍게 자바스크립트 감을 놓치지 않는 용도로 공부하면 될 듯.

우선, html의 오디오 태그를 사용해서 드럼 소리를 저장했다.

<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
...
<audio data-key="76" src="sounds/tink.wav"></audio>

드럼 소리를 재생하는 함수는 다음과 같다.

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');
}

window.addEventListener('keydown', playSound);

querySelector로 불러온 값이 존재하지 않으면 null 처리를 해주는 습관은 꼭 들여놔야 할 듯.

맨날 귀찮아서 처리를 안해줬는데, 인강이란 인강마다 다 해주는 걸 보면 꼭 필요한 습관인가보다.

 

audio.currentTime은 오디오 파일의 재생 시점을 의미하는데, 그걸 매번 0으로 되돌리는 이유는

드럼 오디오 파일이 기본적으로 길이가 적어도 1초에서 길면 2초는 될텐데

그걸 그냥 audio.play만 하면, 아무리 드럼 키를 빠르게 갈겨도 

이번 드럼 소리와 다음 드럼 소리 사이에 1초~2초의 간격이 생기게 된다.

 

그래서 드럼 키를 갈길 때마다 바로바로 소리가 들리게 하기 위해서 처리를 해준 것.

 

그리고 키를 누를 때마다 테두리가 노란색으로 변하고 크기가 조금 커지는 transition이 적용되어 있다.

그 transition을 추가하기 위해 class를 add하는 방법을 사용한 것.

 

여기서 한 가지 신기한 이벤트를 새로 알게 되었는데, 바로 'transitionend'라는 이벤트이다.

특정 요소의 CSS transition이 끝날 때 발생하는 이벤트. 

비슷한 맥락으로 transitionstart도 있다고 한다.

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

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

이 함수는 CSS transition이 끝나면, 해당 transition을 다시 없애주려고 만든 함수이다.

일단 발생하는 이벤트들 중에서 transform이 가장 소요 시간이 길기 때문에

transform이 끝나고 나서 playing 클래스를 제거하도록 하기 위해서

propertyName이 transform이 아닐 때는 전부 넘어가도록 해놨다.

 

여기서 this는 이벤트가 발생한 해당 요소를 가리킨다.

이벤트리스너 내부의 this는 항상 해당 이벤트가 발생한 요소를 가리킴.

e.currentTarget과 동일한 역할을 한다고 보면 된다고 한다.

 

그리고 모든 키에 대해서 transitionend 이벤트를 계속 listen하고 있어야 한다.

언제 어떤 키가 눌려서 transition될지 모르기 때문.

 

요렇게 코드를 작성해주면, 키를 눌렀을 때 아주 잠시동안 노란 테두리가 번쩍했다가

순식간에 사라지는 모습을 확인할 수 있다.