완전한 2022 웹 개발 -2 드럼 세트

링크텍스트

드럼 클래스를 가진 8개의 버튼을 html에서 만든다.

자바스크립트 분석.

var numberOfDrumButtons = document.querySelectorAll(".drum").length;
드럼의 수를 가져오고

for (var i = 0; i < numberOfDrumButtons; i++) {
그 수만큼 반복문 실행
document.querySelectorAll(".drum")[i].addEventListener("click", function() {
드럼을 가져와서 이벤트를 추가. 클릭에 대해서.
var buttonInnerHTML = this.innerHTML;
innerhtml로 드럼에 관여.
makeSound(buttonInnerHTML);
buttonAnimation(buttonInnerHTML);
두개의 함수 할당.
});
}

키프레스에 대해.

document.addEventListener("keypress", function(event) {
makeSound(event.key);
눌린 키 자체를 인식.
buttonAnimation(event.key);
});
문서의 키눌림에 대해서도 효과 두개 주기.
(기술발전에 따라 keypress대신에 keydown을 쓰도록 하자.)

function makeSound(key) {

  switch (key) {
    case "w":
      var tom1 = new Audio("sounds/tom-1.mp3");
      tom1.play();
      break;

    case "a":
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;

    case "s":
      var tom3 = new Audio('sounds/tom-3.mp3');
      tom3.play();
      break;

    case "d":
      var tom4 = new Audio('sounds/tom-4.mp3');
      tom4.play();
      break;

    case "j":
      var snare = new Audio('sounds/snare.mp3');
      snare.play();
      break;

    case "k":
      var crash = new Audio('sounds/crash.mp3');
      crash.play();
      break;

    case "l":
      var kick = new Audio('sounds/kick-bass.mp3');
      kick.play();
      break;
    default: console.log(key);
  }
}

소리생성에 대해서 스위치 케이스 문으로 오디오 파일을 생성자로 만들어서 그걸 재생.

function buttonAnimation(currentKey) {
var activeButton = document.querySelector("." + currentKey);
activeButton.classList.add("pressed");
setTimeout(function() {
activeButton.classList.remove("pressed");
}, 100);
}

currentkey는 지금
buttonAnimation(buttonInnerHTML); buttonAnimation(event.key);
에서 각각 드럼의 클래스인 wsad등의 낱글자이다. 따라서 이들을 클래스로 가져오려면 '.'을 추가하고 쿼리 셀렉트로 가져오자. 그리고 난뒤
css에 정의한 클래스 pressed에 대해서 이를 적용해 줘야 한다.

.pressed {
box-shadow: 0 3px 4px 0 #DBEDF3;
opacity: 0.5;
}

https://velog.io/@rimu/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-classList.add-remove-contains-toggle

classlist.add를 사용해 가지고 있는 클래스를 확인하고 pressed 클래스를 추가해준다.
다만 여기까지만 하면 버튼이 눌린채로 다시 활성화 되지 않기 떄문에. 일정시간이 지난 후에 눌림 클래스를 쩨거해줄 필요가 있다.
이때 쓰이는 것이 setTimeout

링크텍스트

0.1초만에 눌림 클래스가 사라지도록 해서 다시 원래대로 만든다.