[JS] JavaScript Drum Kit을 응용한 Zinee Piano

들어가며

이 강의는 ES6 자바스크립트 문법을 기반으로 작성되어 있습니다. ES6 문법에 익숙하지 않아서 예제 코드에서 모르는 것들은 찾아서 아래 참고자료에 링크로 모아두었습니다. 강의 속 예제와 아래 코드펜이 100% 똑같진 않지만 거의 비슷한 데모가 있어서 가져왔습니다.

See the Pen JavaScript Drum Kit by Maegan Womble (@MaeganW) on CodePen.

만드는 과정

1. 피아노 건반 모양을 html/css로 만듭니다. (마크업 하는 과정은 생략합니다.)

2. 건반에 매칭 된 알파벳을 키보드 자판으로 누르면 data-key 값에 저장된 keyCode값을 읽어옵니다.

3. (2)에서 얻은 keyCode 값과 동일한 keyCode 값을 가진 audio 파일을 재생합니다.

4. 키보드(건반)를 눌렸을 때, 스타일 효과를 주기 위해서 playing 클래스를 추가합니다.

5. 키보드(건반)에서 손을 뗐을 때, 스타일 효과를 걷어내기 위해 playing 클래스를 제거합니다.

function playSound(e){
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); // audio의 data-key값을 가져옴
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); // key의 data-key값을 가져옴
  if (!audio) return; // audio keyCode 값이 없는 경우 중단함
  audio.currentTime = 1; // audio 파일을 특정 초(s)로 되감기 (원본에서는 0으로 되어있는데, 내 wav 파일은 앞에 약간 딜레이가 있어서 1로 설정)
  audio.play(); // audio 재생
  key.classList.toggle('playing'); // 키가 눌릴 때, playing 클래스 추가 (원본 코드는 .add 인데 한 값을 쭈우욱- 누르고 있으면 playing 클래스가 계속 남아 있는 형태로 정지되는 이슈를 발견. .toggle로 바꾸니 그 현상이 해결 됨)
}

function removeTransition(e){
  if (e.propertyName !== 'background-color') return; // playing 클래스가 추가 되었을 때 바뀌는 css property 값을 적어준다.
  this.classList.remove('playing'); // playing 클래스 제거
}

const keys = document.querySelectorAll('.key'); // 모든 .key 들을 keys에 저장
keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // 모든 .key에 removeTransition 이벤트 추가
window.addEventListener('keydown', playSound); // 키가 눌렸을 때 playSound 실행

짠~ 완성!

코드펜 영역 안을 마우스로 클릭 한 뒤, 키보드의 A, S, D, F, G, H, J 를 눌러보세요 ^ㅇ^

See the Pen 01. CSS Piano by zinee (@zineeworld) on CodePen.

코멘트

1. 자바스크립트만 짜는게 아니라 html/css도 같이 들어가는 거라 흥미도가 훨씬 높았다.
2. 똑같은 코드를 따라서 쳐도 동작이 안되는 딜레마 -> 결국 내 잘못 -> 특히 템플릿 리터럴을 몰라서 백틱(``)을 홑따옴표(' ')로 써서 에러남.
3. currentTIme 속성 알게 되서 좋았다.
4. <kbd> 태그도 처음 써봤다.
5. 음원 파일 찾는 것도 일이다. 지금 쓰고 있는 것보다 훨씬 맑은 소리에 잡음도 없는 패키지도 있었는데 그건 갑자기 '시'에서 소리가 이상해져서 쓸 수 없었다.
6. ES6 좋구나! 굳이 jQuery 쓰지 않아도 될 이유를 알겠다. 

참고자료

• <kbd> 키보드 태그

• Element.classList

• HTMLMediaElement.currentTime

• HTML Audio/Video DOM Reference

• JavasScript Event KeyCodes

• ES6 문법 정리

• 템플릿 리터럴