1. JavaScript Drum Kit ( JavaScript30 )

Dev/JavaScript30

1. JavaScript Drum Kit ( JavaScript30 )

takeU 2021. 7. 7. 11:47

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/ 에서 각 키의 키코드를 알 수 있다.

태그는 키보드 입력을 지정할 때 쓰는 코드이다.
data-key 속성은 위의 div와 아래 audio를 하나로 묶어주는 속성이라 할 수 있다.

목표

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

과정

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

const 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. 효과 종료시 변화하는 함수 생성

const 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함수가 작동함

알게된 것

유사배열 > 배열 변환시 Array.from()

저작자표시 비영리 변경금지

현재글1. JavaScript Drum Kit ( JavaScript30 )

takeU