01 - JavaScript Drum Kit (javascript 30)

원문 코드는 아래로 들어가시면 있습니다.

필요하신분들은 클론해서 쓰시면 됩니다.

출처 : https://github.com/wesbos/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit

wesbos/JavaScript30

Javascript30의 첫 프로젝트는 자바스크립트로 드럼만들기입니다.

 

첫 프로젝트를 열어보면 아래의 구조로 이루어져 있습니다.

이번 프로젝트에서 필요한 사운드가 들어있는 폴더와 스타일이 정의된 styles.css이 있으며.

직접 코드를 작성해볼 수 있는 index-START.html 그리고 정답이라 할 수 있는 index-FINISHED.html가 있습니다.

이 중에서 저희는 index-START.html 파일을 열어 코드를 작성하면 됩니다.

 

 

 

 

 

 

 

index-START.html 파일을 열어 코드를 작성하기 시작하겠습니다.

저는 먼저 왼쪽의 코드를 먼저 <script></script> 안에 작성해보았습니다.

이 코드는 보고있는 페이지에서 keydown 이벤트가 발생하면 그 이벤트를 console에 찍는 코드입니다.

 

이제 여기서 사운드를 실행을 시키려면 아래의 코드를 작성해보면됩니다.

이 코드를 간단히 말씀드리자면 입력된 키에 따른 미리 정의된 audio element를 찾아 오디오를 실행하는 코드입니다.

위의 코드만 입력한채로 브라우저를 열어 키를 입력해보면 사운드가 출력되는 것을 볼 수 있습니다.

 

하지만 finished를 브라우저로 열어 확인해보면 이런 플레이 이벤트 말고 시각적인 부분도 있습니다.

이번에는 이 부분을 작성해보겠습니다.

 

아래와 같이 코드를 작성해봅시다

 

위의 코드에서는 추가된 것이 보이시나요?

div 태그중 data-key의 코드가 입력된 키이벤트의 코드와 동일한경우 element를 찾는 코드가 추가되고 audio를 실행하기전

key.classList.add('playing');

이라는 코드가 추가된것이 보입니다.

이 부분은 오디오가 실행되기전 해당 div태그에 playing이라는 클래스를 추가하여 트랜지션을 발생시키는 코드입니다.

해당 트렌지션은 css로 발생하니 따로 설명 하지는 않겠습니다.

 

이대로 실행을 해보면 입력된 키에 대한 시각적인 트랜지션이 발생하지만 다시 원래대로 돌아오지 않습니다.

 

이 부분을 해결하려면 어떻게 해야할까요?

바로 transitionend 이벤트를 해당 element에 등록해두면 됩니다.

 

자 이제 기존 코드 위에 아래의 코드를 추가해보겠습니다.

위 코드는 querySelectorAll로 key라는 클래스를 가진 모든 element를 가져와 유사 배열 형태를 배열로 바꿔 모든 element에 트랜지션이 끝났을때 playing 클래스를 해당 element에서 지워주는 역할을 하는 코드입니다.

 

이제 브라우저를 열어 키를 입력해보면 트랜지션이 정상 수행되고 끝난경우 playing 클래스가 삭제되어 멋있는 시각적인 표현을 할 수 있게되었습니다.

 

* 추가적으로 코드가 보기에 불편한거 같기에 같은 역할을 하지만 조금 변경한 코드입니다

* 결국엔 finished 코드랑 똑같아져 버렸네요 ㅋㅋ..