JavaScript Drum Kit

위에 첨부한 사진처럼 해당하는 키보드를 누르면 화면에 효과와 함께 소리가 나는 드럼 킷을 만드는 것

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Drum Kit</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="keys">
    <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
    <div data-key="70" class="key">
      <kbd>F</kbd>
      <span class="sound">openhat</span>
    </div>
    <div data-key="71" class="key">
      <kbd>G</kbd>
      <span class="sound">boom</span>
    </div>
    <div data-key="72" class="key">
      <kbd>H</kbd>
      <span class="sound">ride</span>
    </div>
    <div data-key="74" class="key">
      <kbd>J</kbd>
      <span class="sound">snare</span>
    </div>
    <div data-key="75" class="key">
      <kbd>K</kbd>
      <span class="sound">tom</span>
    </div>
    <div data-key="76" class="key">
      <kbd>L</kbd>
      <span class="sound">tink</span>
    </div>
  </div>
  <audio data-key="65" src="sounds/clap.wav"></audio>
  <audio data-key="83" src="sounds/hihat.wav"></audio>
  <audio data-key="68" src="sounds/kick.wav"></audio>
  <audio data-key="70" src="sounds/openhat.wav"></audio>
  <audio data-key="71" src="sounds/boom.wav"></audio>
  <audio data-key="72" src="sounds/ride.wav"></audio>
  <audio data-key="74" src="sounds/snare.wav"></audio>
  <audio data-key="75" src="sounds/tom.wav"></audio>
  <audio data-key="76" src="sounds/tink.wav"></audio>

<script>

</script>
</body>
</html>

여기서 div 속성중 data-key 는 어떤 키를 눌러서 실행 시킬수 있는지 설정하는 것이며
http://keycode.info/ 에서 각 키의 키코드를 알 수 있다.
<kbd>태그는 처음봤는데 키보드 입력을 지정할 때 쓰는 코드라고 한다.
data-key 속성은 위의 div와 아래 audio를 하나로 묶어주는 속성이라 할 수 있다.

목표

키보드 키 입력시 애니메이션효과와 소리를 출력해 드럼 킷을 만드는 것

과정

  1. 해당 키 입력시 효과음 추가하는 함수 생성
  2. 키 재입력 시간 설정(연속 입력 가능하도록)
  3. 효과 종료시 변화하는 함수 생성
  4. 효과음 출력 및 종료 설정

코드 분석

  1. 해당 키 입력시 효과음 추가하는 함수 생성

    function playSound(e) {
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
     if (!audio) return;
    
     key.classList.add('playing');
     audio.play();
    }
    

    audio, key에 각각 누른 키보드의 keyCode와 일치하는 속성을 가진 요소들을 담아주고
    일치하는 audio가 없다면 아래코드를 실행하지 않고, 일치한다면 누른 버튼에 playing클래스를 추가해주고
    해당 소리를 play하는 playSound()함수를 생성

  2. 키 재입력 시간 설정(연속 입력 가능하도록)

    audio.currentTime = 0;
    

    오디오 재생의 현재 위치를 0초로 이동함. 이로써 입력 후 다시입력하면 같은 소리를 재생시킬 수 있어
    소리가 끝나야 입력이 가능했던게 연속으로도 입력이 가능함
    위의 코드를 audio.play() 위에 삽입함

  3. 효과 종료시 변화하는 함수 생성

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

    누른 키의 속성명중 transform이 이 없으면 다음 코드를 실행하지 않고,
    존재한다면 playing이란 클래스를 지우도록하는 removeTransition()함수를 생성

  4. 효과음 출력 및 종료 설정

    const keys = Array.from(document.querySelectorAll('.key'));
    keys.forEach(key => key.addEventListener('transitionend', removeTransition));
    window.addEventListener('keydown', playSound);
    

    key 클래스를 가진 모든 요소를 keys에 배열로 담고
    반복자 forEach를 사용해 각각의 요소에 변화가 끝나면(transitionend) removeTransition 함수를 실행하고,
    keydown 이라는 이벤트 타입을 실행하면 playSound함수가 작동함

찾아본 내용, 알게된 내용들

const - const는 ES6 문법으로 내용이 변하지 않는 값을 넣을 때 사용함(상수 선언)
keydown - 키를 누를 때 작동하는 것, 참고로 keyup은 키를 누르고 뗄 때 작동

'개발 > JavaScript30' 카테고리의 다른 글

5. Flex Panel Gallery  (0) 2017.04.05
4. Array Cardio Day 1  (0) 2017.04.04
3. CSS Variables  (0) 2017.04.03
2. CSS + JS Clock  (0) 2017.04.03
1. JavaScript Drum Kit  (0) 2017.03.30
0. JavaScript30 Challenge  (0) 2017.03.30

+ Recent posts