글 작성자: 택시 운전사
반응형

opera.jpeg
다운로드

🎹 Day 1 - JavaScript로 악기 만들기

JavaScript 30의 첫 번째 프로젝트는 '드럼 킷 만들기'이다. 특정 키보드 버튼을 누르면 해당하는 드럼 소리가 나와서 연주를 할 수 있는 프로젝트이다.

😃 HTML 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>SYNTH PIANO</h1>
    <section>
      <ul>
        <li data-key="65" class="key">
          <span>A</span>
        </li>
        <li data-key="83" class="key">
          <span>S</span>
        </li>
        <li data-key="68" class="key">
          <span>D</span>
        </li>
        <li data-key="70" class="key">
          <span>F</span>
        </li>
        <li data-key="71" class="key">
          <span>G</span>
        </li>
        <li data-key="72" class="key">
          <span>H</span>
        </li>
        <li data-key="74" class="key">
          <span>J</span>
        </li>
        <li data-key="75" class="key">
          <span>K</span>
        </li>
        <li data-key="76" class="key">
          <span>L</span>
        </li>
        <li data-key="186" class="key">
          <span>;</span>
        </li>
        <li data-key="222" class="key">
          <span>'</span>
        </li>
      </ul>
    </section>
    <footer>
      <p><a href="../">Back to List</a></p>
      <p><a href="https://javascript30.com/">Javascript30</a> Day1</p>
    </footer>
    <audio data-key="65" src="sound/1.mp3"></audio>
    <audio data-key="83" src="sound/2.mp3"></audio>
    <audio data-key="68" src="sound/3.mp3"></audio>
    <audio data-key="70" src="sound/4.mp3"></audio>
    <audio data-key="71" src="sound/5.mp3"></audio>
    <audio data-key="72" src="sound/6.mp3"></audio>
    <audio data-key="74" src="sound/7.mp3"></audio>
    <audio data-key="75" src="sound/8.mp3"></audio>
    <audio data-key="76" src="sound/9.mp3"></audio>
    <audio data-key="186" src="sound/10.mp3"></audio>
    <audio data-key="222" src="sound/11.mp3"></audio>
    <script src="main.js"></script>
  </body>
</html>

😃 JavaScirpt 코드

playSound = e => {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`li[data-key="${e.keyCode}"]`);
  if (audio) {
    audio.currentTime = 0; // 처음으로 되돌리기
    audio.play();
    key.classList.add("playing");
  }
};

removeTransition = e => {
  if (e.propertyName === "transform") {
    e.target.classList.remove("playing");
  }
};

window.addEventListener("keydown", playSound);

const pianoElList = document.querySelectorAll("li");
pianoElList.forEach(el => {
  el.addEventListener("transitionend", removeTransition);
});

우선 구현해야 할 것은 버튼 클릭 시 소리가 나오는 부분이다. 이전에 프로젝트용 오디오 파일을 한 세트 다운 받아야 한다. 나는 piano sound kit 이라는 검색을 통해 매우 웅장한 소리의 신스 소리를 받을 수 있었다. 이런 프로젝트의 경우 강의에 나온 대로 따라하기 보다 본인이 이런 변형을 가하는 것이 나중에도 기억이 오래남을 것이다.

오디오 파일을 다 받았다면, 다음은 키보드를 눌렀을 때 해당 키 값을 인지하는 코드가 필요하다. 위의 HTML 코드에 각 버튼마다 data-key라는 property에 숫자들이 적혀있다. 이는 키보드의 특정 키를 눌렀을 때의 keyCode 값이 적혀 있는 것이다. 어떤 키가 어떤 keyCode를 가지는 지 궁금하다면 keycode.info 해당 사이트에서 해당하는 keyCode 값을 확인할 수 있다. 이제 키에 해당하는 오디오 파일을 재생하면 된다.

이 상황에서 문제가 되는 건 키를 연속으로 눌렀을 때, 이전 오디오가 끝나지 않으면 새로운 오디오가 재생되지 않는 다는 점이다. 이를 해결하기 위해 audio의 property인 currentTime을 0으로 만들어줘 내가 틀고자하는 오디오가 이미 재생되고 있다면 처음부터 재생하게 만들어준다.

다음은 시각적 변화를 만들어 주는 방법이다. key.classList.add('playing')을 통해 음악이 재생되면 해당하는 버튼의 class에 playing을 추가해준다. 그리고 CSS파일에서 playing에 대한 CSS를 꾸며주면 클릭과 동시에 버튼에 시각적 변화가 생기게 된다.

마지막으로 변화가 된 버튼을 오디오 재생이 끝나기 전에 원 상태로 되돌려야 한다. 모든 li tag를 확인해서 해당 li tag의 CSS의 transition이 끝나면 playing이라는 class를 제거하여 원 상태로 돌려주는 식으로 마무리한다.

function removeTransition (e) {
  if (e.propertyName === "transform") {
    this.classList.remove("playing");
  }
};

강의에 나온 원래 코드는 다음과 같지만, 나는 Arrow Function을 사용해서 this대신 e.target을 이용했다.

링크

반응형
저작자표시

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] 🎨 JavaScript로 CSS 업데이트하기  (0) 2019.02.04
[JavaScript] ⌚ JavaScript로 시계만들기  (0) 2019.02.03
📅 30일간 30개의 JavaScript 프로젝트 도전기 / JavaScript 30  (0) 2019.02.02
npx create-react-app ... 그래서 npx가 뭐길래?  (3) 2018.12.26
[JavaScript] 키보드 이벤트 함수 onKeyDown, onKeyUp, onKeyPress 비교  (0) 2018.12.23

티스토리툴바