Day1 - Drum Kit

주제: 해당 키보드 누르면 스타일 바뀌고 소리남

배운거

1. event에 keydown과 keyup이 있다.

keydown는 키보드를 눌렀을 때, keyup은 누르던 키보드를 뗄 때 이벤트가 발생된다.

2. keyCode

키보드 입력 이벤트 객체에는 key와 keyCode 등이 있는데 key는 내가 누른 키보드 값 (a, b 등등 그 자체)이고 keyCode는 ASCII 코드에 기반한 값으로 a는 65, s는 83 등 숫자로 매칭되어 있다.

3. 데이터 속성 (data attribute)

data-@@@ 식으로 쓰면 됨

<div data-key="65" class="key"></div>

<script>
document.querySelector(`div[data-key="${e.keyCode}"]`)
document.querySelector(`.key[data-key="${e.keyCode}"]`)
</script>

4. audio 태그

<audio data-key="65" src="sounds/clap.wav"></audio>

<script>
const sound = document.querySelector(`audio[data-key="${e.keyCode}"]`);

sound.play();          // 음원 재생
sound.pause();         // 음원 멈춤
sound.currnetTime=0;   // 음원의 재생 위치를 처음으로 이동
</script>

5. transitionend event

transition이 완료된 후 발생되는 이벤트

<script>
const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', callback_func));
</script>

---

코드 비교

내 코드

<script>
window.addEventListener("keydown", (e) => {
  const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
  const sound = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  if (key) {
    key.classList.add("playing");
    sound.play()
  }
})

window.addEventListener("keyup", (e) => {
  const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
  const sound = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  if (key) {
    key.classList.remove("playing");
    sound.pause();
    sound.currentTime=0;
  }
})
</script>

제공된 코드

<script>
  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);
</script>

난 진짜 정직하게 키보드 누를 때, 뗄 때 나눠서 짜고 trainsition으로 이벤트를 다룰 거라고는 생각도 못했는데 새로 배웠다!