[Project] 드럼 패드

webpad

- 프로젝트 개요

• 키보드 입력을 받아 해당하는 드럼 소리를 출력하는 웹 어플리케이션

 

- JavaScript Code

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

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

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

• playSound 함수
  • https://keycode.info/ : 해당 사이트에서 JavaScript의 키 코드를 확인할 수 있음
  • document.querySelector()를 사용하여 audio와 key 변수에 Argument의 keyCode 정보를 저장
  • 아무 정보도 저장되지 않는다면(null) 리턴, 그 외에는 .play()를 사용하여 오디오 재생
  • classList.add()를 사용하여 key에 playing 클래스를 저장 -> 애니메이션 효과
• removeTransition 함수
  • Argument의 Property가 transform, 즉 애니메이션 효과가 있는 상태일 경우에 playing 클래스 삭제
  • 클래스의 효과를 주는 속성은 transform이고 효과를 제하는 속성은 transtition임

JavaScript Event KeyCodes