[JavaScript] Day 1 자바스크립트로 악기(드럼) 만들기

 

JavaScript30의 첫 번째 날의 주제로 악기(드럼)를 만들어봤다.

우선 결과 화면은 위와 같다. 나는 키보드의 A부터 L에 드럼 세트들을 각각 설정하고 해당 키를 누르면 그에 맞는 소리가 나게 했다. 위 사진은 KICK과 SNARE가 눌렸을 때의 상태이다. 

---

<div data-key="65" class="key">
	<kbd>A</kbd>
    	<span class="sound">clap</span>
</div>

 

각 소리를 나타내는 패드의 HTML 코드이다. 클래스 이름을 key로 주고, 자신이 누를 키보드 상의 문자와 무슨 소리를 낼지를 나타낸다. 이때, data-key는 해당 키의 키 코드이다. 모든 키보드 문자에는 각자의 키 코드가 있는데, 그 키 코드의 값을 data-key 값으로 넣어준다. 키 코드를 확인하는 방법은 윈도우 객체에 'keydown' 이벤트 리스너를 달고 e.keydown을 콘솔 창에 띄어보면 알 수 있다. 

 

키 코드( A부터 L까지 차례대로 )

 

<audio data-key="65" src="sound/clap.wav"></audio>

 

그리고 각 키에 낼 소리들을 담은 파일을 audio 태그로 생성한다.

이때도 마찬가지로 data-key 값을 해당 키 코드로 준다.

 

※ 드럼 킷등 다양한 킷들을 모아놓은 사이트 : https://www.thesample.net/

 

function playSound(e) {
    //console.log(e.keyCode);
    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);

 

실제로 키가 눌렸을 때 소리를 내는 코드는 위와 같다. 앞서 언급한 것과 같이 window에 'keydown' 이벤트 처리를 해주고 playSound 함수를 호출하면 playSound 함수 파라미터 e에는 자신이 누른 키 객체가 전달이 된다. 해당 키 객체의 키 코드에 맞는 audio와 key를 각 변수에 저장하고 소리를 재생한다. 그리고 눌린 키에 한해서 key에 노란색 border 효과를 주기 위해 클래스 이름에 playing을 추가시킨다. 마지막으로 key가 계속 효과를 가지고 있으면 안되므로 border 효과를 없애야 한다. 그에 대한 자바스크립트 코드는 다음과 같다.

 

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

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

 

나는 드럼으로 만들어봤지만, key에 대한 UI를 피아노 건반으로 바꾸고 사운드에 각 음에 맞는 사운드 파일을 넣으면 피아노도 간단하게 만들어 볼 수 있을 것 같다.