[JS30] day 1 - drumkit

HTML

<div class="keys">
    <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
    <div data-key="70" class="key">
      <kbd>F</kbd>
      <span class="sound">openhat</span>
    </div>
    <div data-key="71" class="key">
      <kbd>G</kbd>
      <span class="sound">boom</span>
    </div>
    <div data-key="72" class="key">
      <kbd>H</kbd>
      <span class="sound">ride</span>
    </div>
    <div data-key="74" class="key">
      <kbd>J</kbd>
      <span class="sound">snare</span>
    </div>
    <div data-key="75" class="key">
      <kbd>K</kbd>
      <span class="sound">tom</span>
    </div>
    <div data-key="76" class="key">
      <kbd>L</kbd>
      <span class="sound">tink</span>
    </div>
  </div>

• data-key data-*** 형식으로 가지고 있는 속성 값을 부여해 주는 태그, data-아무거나 넣어도 된다! CSS/JS 모두 접근할 수 있으며 문법은 아래와 같다
  👇 JS data-my-key ⇒ (속성을 가지고 있는 요소).dataset.myKey (속성을 가지고 있는 요소)[data-my-key="값"] { css구문~~ }

키보드가 가지고 있는 키 값을 알려주는 사이트 http://keycode.info/

CSS 사용 부분

.keys {
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.key {
  border: .4rem solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  width: 10rem;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.4);
  text-shadow: 0 0 .5rem black;
}

.playing {
  transform: scale(1.1);
  border-color: white;
  box-shadow: 0 0 1rem white;
}

• media 파일을 실행하면 playing class가 add되면서 재생됨을 알리도록 css에 효과를 추가해 줌

JS 사용 부분

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

</script>

audio 변수는 querySelector로 해당 키 값을 data-key로 가지고 있는 audio파일을 선택하는 변수 이는 audio파일으로 .play()를 사용해 오디오파일을 실행시킬 수 있다

classList로 DOM 객체에 class를 add하고 remove 할 수 있음

• transitonend event css의 tranform이벤트를 실행하는 시간이 끝나면(transition이 end되면) transitonend 이벤트가 실행된다 이 이벤트는 drumkit에서 playsound에서 add된 playing 클래스를 지워주기 위해 만들 함수에서 필요 함
• HTMLMediaElement.currentTime 현재 미디어가 재생 중인 시간(초)를 나타냄, 만약 오디오 재생 시간이 2초인데 오디오가 실행되는 이벤트가 그것보다 자주 일어난다면 필요한 메서드 한번 재생을 끝내고 시작 시점이 0으로 돌아가기 때문에 2초를 기다려야 됨 이렇게 기다리기 싫으면 키를 누를 때마다 시작 시점을 0으로 바꿔주어 계속 처음부터 재생되게 한다