[JavaScript30/Day-1] Drum Kit

How?

특정 키를 누르면 해당 키값을 attribute로 가지는 오디오가 재생된다

 

Solution

document.addEventListener('keydown', (e)=>{
    let audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    let key = document.querySelector(`div[data-key="${e.keyCode}"]`);

    if(!audio) return;

    audio.currentTime = 0; // 메모!
    audio.play();
    key.classList.add('playing');
})

function removeTransition(e){
    if (e.propertyName !== 'transform') return; //propertyName???
    e.target.classList.remove('playing');
}

const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

 

TIL (Today I Llearned🎉)

• Audio의 currentTime 속성 
  : currentTime은 오디오(및 비디오)의 재생 지점을 뜻한다. 값이 0일 경우 파일의 처음부터 시작한다
• event의 propertyName 속성
  : 해당 객체의 css 속성을 가져온다
• addEventListener에서 transitioned 이벤트
  : 해당 요소에 변화가 완료되면 이벤트 실행