자바스크립트 드럼 키트 만들기

 

 

1. 키보드의 특정 키를 누르면 매칭되는 음원 재생시키기

 

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

const keys = document.querySelectorAll('.key');
window.addEventListener('keydown', playSound);

• document.querySelector 키를 이용하여 특정 태그 뿐만 아니라 태그의 속성값을 특정하여 가져올 수 있다. 이 때 백틱과 ${}를 사용하면 유연하게 값을 변수 처리하여 불러올 수 있다.
• currentTime을 0으로 설정하면, 음악의 기본 재생시간을 0으로 설정하여 키 값을 쉼 없이 연속해서 누를 때 버퍼링 없이 음악이 바로 반복 시작되게 할 수 있다.
• 자바스크립트를 이용하여 클래스명을 동적으로 바꿀 수 있다. 이를 통해 자바스크립트가 처리한 클래스와 그렇지 않은 클래스를 구분한다.
• 윈도우에서 키보드의 특정 키를 누르면 ('keydown') 함수가 실행되도록 한다.

 

2. 음원 재생 함수가 실행되고 나면 효과를 없애기

function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
  }
  
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

• 동적으로 변환된 클래스명을 transform CSS 속성 명으로 구분, 클래스명을 다시 원래대로 바꾼다.
• CSS를 통한 transition이 실행되고 나면 이 함수를 자동으로 실행시키도록 한다.

 

3. CSS의 transform 속성

• scale (크기가 커짐), rotate (회전함), translate (이동함) 등 다양한 동적인 디자인을 적용할 수 있다.