Javascript30 - DRUM KIT

1. JAVASCRIPT DRUM KIT

 

요구사항

1. 사용자가 A부터 L을 눌렀을 때 각각의 문자에 할당된 오디오파일을 재생해야 한다.

2. 오디오파일 재생시에 브라우저에서 사용자가 누른 키가 뭔지 UI가 바뀌면서 표시되어야 한다.

 

1. html에서 div의 어트리뷰트에 각 키마다 data-key를 넣어서 구별이 가능하게 한다.

        <div data-key="65" class="key">
            <KBD>A</KBD>
            <div>boom</div>
        </div>

 

2. 오디오파일에도 data-key를 넣어서 누른 키에 따라 어떤 오디오파일을 실행하고자 하는지를 파악한다.

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

 

3. javascript에서 화면에 키입력이 감지되면 playsound함수를 실행한다.

window.addEventListener('keydown',playsound);

4. playsound함수

- event.keyCode를 통해서 어떤 data-key가 눌렸는지 알 수 있기 때문에 해당 data-key를 가진 키와 오디오를 가지고 온다. 누른 키값이 A~L이 아닌 경우 return한다.

- audio.play()만 하면 플레이 도중에 같은 키를 눌렀을 때 재플레이가 되지 않기 때문에 .audio.play()이전에 audio.currentTime=0으로 해줘서 초기화를 시켜준다.

- 클래스에 playing클래스를 추가해서 눌린키의 UI가 변하게 한다. 이때 key클래스에 transition:0.2s 가 있어서 0.2초동안 변하게 보이는 때문에 애니메이션 효과가 있다.

function playsound(event) {
    const key = document.querySelector(`div[data-key="${event.keyCode}"]`);
    const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
    if (key === null) {
        return;
    }
    audio.currentTime = 0;
    audio.play();
    key.classList.add('playing');
}

 

5. 오디오파일 재생파트는 끝났고 이제는 추가했던 plyaing클래스를 제거하자. 

- 전체 키 중 변환이 끝난(transitionend) 키만 popping함수를 실행한다.

- popping함수는 event.propertyName이 'transform'이면 리턴하고  아니면 playing클래스를 제거한다.

const keys = document.querySelectorAll('.key');

function popping(event) {
    if (event.propertyName !== 'transform') {
        return;
    }
    event.target.classList.remove('playing');
}

keys.forEach(function(key) {key.addEventListener('transitionend',popping);});