01 - JavaScript Drum Kit

구현하기

• 기본적으로 구현되있는 html, css 및 audio 파일 등 이용
• 키보드 입력 시 연결된 오디오 소리가 들림
• 키보드 입력 시 해당 키 div에 animation 효과 적용
• drum에 해당하지 않는 키가 입력되었을 시 에러 처리
• javascript로만 구현

html, css, 파일들 기본 셋팅

01 - JavaScript Drum Kit

풀이

1. 키보드 키 입력 받기

window.addEventListener('keydown', function(e){
	console.log(e);
});

2. 특정 audio 선택하기

querySelector 를 이용해서 특정 audio를 선택해준다.
선택 시 템프럴 리터럴을 이용해서 입력되는 keyCode 값에 따라 audio의 data-key 를 선택하게 해준다.

window.addEventListener('keydown', function(e){
	👉const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
});

3. audio 실행시키기

window.addEventListener('keydown', function(e){
	<const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    👉audio.play();
});

4. audio 실행 시 소리 딜레이 없애주기

currentTime 을 이용해서 음악의 재생 지점을 강제로 설정해준다. 초 단위이며 0 값인 경우에 처음부터 음악을 재생한다.

window.addEventListener('keydown', function(e){
	const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)

	👉audio.currentTime = 0;
	audio.play();
});

5. data-key 예외처리

drum에 해당하는 키가 아닌 키를 입력하면 querySelector로 갖고 올 때, data-key를 갖고 올 수가 없다.
그렇기에 에러 처리를 해줘야한다.

window.addEventListener('keydown', function(e){
	const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
	👉if (!audio) return;

	audio.currentTime = 0;
	audio.play();
});

6. css transition을 이용해서 화면에 애니메이션 효과 주기

css파일에서 playing 클래스를 주면 transition을 이용해서 크기가 커지게 셋팅이 되있다.
그렇다면 선택된 div에 playing 클래스를 추가해주면 된다.

window.addEventListener('keydown', function(e){
	const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  	👉const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
	if (!audio) return;

  	👉key.classList.add('playing');
	audio.currentTime = 0;
	audio.play();
});

7. transition 종료 후 원상태로 돌려보내기

현재는 scale이 커지고서 그대로 멈춰있다. 원상태로 돌려보내기 위해서는 playing 클래스를 지워줘야된다.

(1) Array.from 을 이용해서 우리가 조작할 div 전체를 갖고와서 keys 라는 배열로 만들어준다.
(2) forEach 를 이용해서 keys 배열에 하나씩 이벤트를 등록한다.
(3) transitionend 라는 이벤트는 transition이 완료된 이후에 발생하는 이벤트를 말한다. 즉, transition 완료를 감지하게 된다.
(4) transition의 완료를 감지할 때, transition이 아직 작동중이라면 스킵해줘야한다. 맨 마지막 상태인 transform인지 확인하고서 playing 클래스 이름을 지워준다.

window.addEventListener('keydown', function(e){
	const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  	const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
	if (!audio) return;

  	key.classList.add('playing');
	audio.currentTime = 0;
	audio.play();
});

👉const keys = Array.from(document.querySelectorAll('.key'));
👉keys.forEach(key => key.addEventListener('transitionend', function(e){
  	if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
}));

8. 코드 정리

함수로 묶을 수 있는 것은 함수로 묶어주는 게 좋다.

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

function playSound(e) {
	const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
	const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
	if (!audio) return;

	key.classList.add('playing');
	audio.currentTime = 0;
	audio.play();
}

const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);

정리

쉽게 봤다가 말 그대로 큰 코 다쳤다. 사용해보지 않았다던가 이런식으로 사용하는 걸 생각해본적도 없던 방식들이 여러가지 나왔다. 배울 게 넘쳐난다.

• transitionend 이벤트
• querySelectorAll을 Array.from으로 배열로 만든다음 forEach로 사용하기 (이렇게 셋이 같이 쓰이는 경우가 많다고 한다.)
• transition 처리 시 transform이 맨 마지막(이유는 모름)
• document.querySelector(앨리먼트[속성 값="${백 틱 표현식}"]);