키보드 이벤트 드럼만들기.

html 코드.

음 잘 봐야 할 것은 data-key를 저장해주는데 어떤 값이든 audio와 일치해야 내가 원하는 키를 눌렀을때 원하는 오디오를 이벤트로 발생시킬 수 있다. data-key 속성값을 이용해서 쿼리를 가져오기 때문이다.

아 그리고 기존에는 키 이벤트 사용시 keyCode 속성을 이용했는데 현재는 지양하길 권한다고 한다.

그래서 key 또는 code 속성을 이용해주라고 한다.

css 코드이다 다른건 별거 없고 .playing부분이 자바스크립트로 이벤트 발생시 추가해줄 클래스명이고 스타일 효과이다.

자 이제 자바스크립트 코드를 보자

윈도우창에서 이벤트 리스너를 통해 keydown 이벤트가 발생하면 playSound라는 이벤트를 실행해주고

playSound이벤트는 key와 audio를 쿼리셀렉터를 통해 가져오는데 이때 이벤트가 발생한 key값지 정해주고 data-key에 설정한 키값과 일치시켜서  가져온다. 그래서 data-key에 값을 내가 누를 키보드의 값으로 주었던 것이다.

한번 키다운 이벤트가 발생했을때 이벤트를 콘솔로그로 보면

저렇게 key값과 code값이 따로 propety가 있다. 둘중 어느것을 써도 무방하나 여기서는 key값으로 하겠다.

그리고 만약 오디오가 없다면 바로 함수를 중지 시킨다.

audio.play()로  키가 입력되면 사운드를 발생시키고 audio의 currentTime을 0으로 줘서 현재 사운드가 끝날때 까지 기다리는 것이 아닌

다른 이벤트가 발생하면 바로 시작할 수 있게 해준다.

그리고 key에는 앞서 css에서 만든 애니메이션 효과를 줄 수 있도록 classList를 추가해준다.

 

그럼 키가 눌리면 화면상에서도 효과가 발생한다. 그런데.. key의 css효과가 지속되고 있다. 효과를 없애는 자바스크립트 효과를 넣지 않았기 때문이다.

이제 효과를 없애줄 코드를 넣자. CSS전이 효과인  transitionend 효과인데 

이러하다 .. css전이가 완료되었을때!의 이벤트가 발생한다.

전이가 완료되면 추가된 classList를 삭제해주는 함수를 넣어서 이벤트를 발생시켜주자.

콘솔로그로 이벤트를 찍어보면

이렇게 많은 전이가 완료된 이벤트가 발생한다

여기서 필자는 마지막의 propertyName : transform을 이용했다.

만약 e.propertyName이 transform이 아니라면 ! return을 줘서 함수 실행을 스탑하고

아니라면 this키워드를 사용해서 해당 태그의 classList를 지워준다.

 

아 그리고 한개에만 실행 시킬 것이 아니기에 일단 queryselectorAll을 통해 모든 키를 가져오고

각각의 forEach를 활용해 각각의 키에 이벤트리스너를 실행해준다.

 

이렇게 하면 완료~!~!