Javascript30. 01 - JavaScript Drum Kit

javascript30

Javascript30

정리 : Javascript30을 공부한 내용 기록

01 - JavaScript Drum Kit

목표

요구사항

  1. 정해진 키를 누른다.
  2. 키를 누르면 소리가 재생된다.
  3. 키를 누르면 CSS 효과가 발생한다.
  4. CSS 효과는 0.5초 간 적용된 후 사라진다.

필요기술

  1. 입력된 키의 값을 확인한다.
  2. audio를 재생한다.
  3. class를 적용한다.
  4. class를 제거한다.

배운 것

Document.querySelector()

querySelector의 사용 방법.

const tagPicker = tag => key => document.querySelector(`${tag}[data-key="${key}"]`);
const divPicker = tagPicker("div"); // div[data-key="${key}"]
const audioPicker = tagPicker("audio"); // audio[data-key="${key}"]

Element.classList

Element.classList를 이용하여 쉽게 클래스를 추가(add), 삭제(remove), 변경(toggle)할 수 있다.

const div = divPicker(key);

div.classList.add("playing");
setTimeout(() => div.classList.remove("playing"), 100);

audio

audio를 사용할 때 currentTime을 0으로 변경하면 지연없이 바로 실행이 가능하다.

const audio = audioPicker(key);

audio.currentTime = 0;  // 재생 딜레이를 0으로 변경한다.
audio.play();

keydown

키보드를 입력할 때는 keydown을 사용하자.

keypress는 Deprecated 되었음.
key이벤트에서 keyCodeDeprecated 되었음.

window.addEventListener("keydown", (e) => {
  kickTheDrum(e.key);
});

👋


Written by@davidyang2149 (About me)
Hello World! This is David Yang Dev Blogs.

GitHub