[JavaScript30] 01 - JavaScript Drum Kit

 

소스 코드

JavaScript30/01 - JavaScript Drum Kit at master · jisunipark/JavaScript30

 

Today I Learned

audio.currentTime = 0

function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  if (!audio) return; // stop the function from running all together
  audio.currentTime = 0; // rewind to the start
  audio.play();
  key.classList.add('playing');
}

 

keydown 이벤트가 연속으로 발생 시 해당하는 오디오가 완료되기까지 기다리지 않고 바로 처음부터 재생할 수 있도록 하려면 소리 재생 시 audio.currentTime을 0을 설정해주면 된다.

 

스스로 만들어보면서는 play 중인 다른 오디오가 있다면 그 오디오를 정지시키는 방식으로 접근하려 해서 복잡해졌는데 조금만 다르게 접근해보면 코드 한 줄로 끝낼 수 있었던 것이었다.

 

transitionend 이벤트

function removeTransition(e) {
  if (e.propertyName !== 'transform') return; // skip it if it's not a transform
  this.classList.remove('playing');
}

function removeTransition(e) {
  if (e.propertyName !== 'transform') return; // skip it if it's not a transform
  this.classList.remove('playing');
}

 

transitionend 이벤트라는 게 있다. CSS transition이 완료되면 발생하는 이벤트이다. press된 키의 UI를 강조해주는 playing 클래스를 추가 후 트랜지션이 종료되면 해당 클래스를 제거하기 위해 사용되었다.

 

참고

🔊 웹에서 음악 객체(Audio) 다루기