1. keyboard로 audio 다루기

주제

키를 눌렀을 때, audio 파일 소리를 재생시켜 악기처럼 연주를 해보는 간단한 JS를 구현해보고자 한다.

밑에 같은 사운드 플레이 파일이 필요합니다

   <div class="keys">
      <div data-key="KeyA" class="key">
        <kbd>A</kbd>
        <span class="sound">clap</span>
      </div>
      <div data-key="KeyS" class="key">
        <kbd>S</kbd>
        <span class="sound">hihat</span>
      </div>
      <div data-key="KeyD" class="key">
        <kbd>D</kbd>
        <span class="sound">kick</span>
      </div>
      <div data-key="KeyF" class="key">
        <kbd>F</kbd>
        <span class="sound">openhat</span>
      </div>
      <div data-key="KeyG" class="key">
        <kbd>G</kbd>
        <span class="sound">boom</span>
      </div>
      <div data-key="KeyH" class="key">
        <kbd>H</kbd>
        <span class="sound">ride</span>
      </div>
      <div data-key="KeyJ" class="key">
        <kbd>J</kbd>
        <span class="sound">snare</span>
      </div>
      <div data-key="KeyK" class="key">
        <kbd>K</kbd>
        <span class="sound">tom</span>
      </div>
      <div data-key="KeyL" class="key">
        <kbd>L</kbd>
        <span class="sound">tink</span>
      </div>
    </div>

    <audio data-key="KeyA" src="sounds/clap.wav"></audio>
    <audio data-key="KeyS" src="sounds/hihat.wav"></audio>
    <audio data-key="KeyD" src="sounds/kick.wav"></audio>
    <audio data-key="KeyF" src="sounds/openhat.wav"></audio>
    <audio data-key="KeyG" src="sounds/boom.wav"></audio>
    <audio data-key="KeyH" src="sounds/ride.wav"></audio>
    <audio data-key="KeyJ" src="sounds/snare.wav"></audio>
    <audio data-key="KeyK" src="sounds/tom.wav"></audio>
    <audio data-key="KeyL" src="sounds/tink.wav"></audio>

이 처럼 html 코드를 작성해줍니다

data 속성을 통해서 div태그와 audio태그를 매칭시켜주었습니다

key 속성: key 속성은 눌린 키의 실제 값(문자)을 나타냅니다. 예를 들어, A 키를 눌렀을 때는 "A"가 됩니다. 

code 속성: code 속성은 눌린 키의 물리적인 위치를 나타냅니다. 이 값은 브라우저와 운영체제에 따라 다릅니다. 예를 들어, A 키를 눌렀을 때는 "KeyA"가 됩니다.

저는 여기서 code를 이용할 것이기 때문에 KeyA, KeyS로 값을 주었습니다

이제 특정 키를 눌렀을 때 이벤트가 발생하고 audio파일을 재생하도록 하면 됩니

키를 누르면 발생하는 이벤트를 이용해야합니다 Keydown 이벤트가 있습니다

window.addEventListener("keydown", playSound);

윈도우 객체에 이벤트 리스너를 달아주어서 keydown이벤트에 함수를 등록합니다

function playSound(e) {
    console.log(e.code);
    const audio = document.querySelector(`audio[data-key="${e.code}"]`);
    const key = document.querySelector(`div[data-key="${e.code}"]`);
    console.log(key);
    if (!audio) return; // 다른 키를 눌러서 aduio 값이 없으면 함수 실행 X
    audio.currentTime = 0; // 오디오 파일을 시작부터 실행하기 위한 부분
    audio.play(); // 오디오 파일 실행!
}

js에서 요소를 선택하기 위해서 다양한 방법을 제공하고 있습니다

그중 유용한 커스텀 데이터 속성을 통해 요소를 선택하고 매칭 시켜주었습니다

이제 A부터 L까지 키보드를 누르면 해당되는 오디오 파일이 실행되어 악기를 연주할 수 있습니다.