Reactjs를 사용하여 피아노 만들기 - Audio( ) WebAPI 및 Hooks

저는 최근에 Devfolio에서 열린 Hackbytes 해커톤 2022에 참가했는데 여기서 Reactjs를 사용하여 피아노를 만들었습니다. 현실이 되기에는 너무 좋았습니다. 그래서 실제로 Reactjs를 사용하여 만드는 과정을 공유하려고 생각했습니다. CSS 파트는 무시하고 Javascript에만 집중할 것입니다.

그러니 준비하세요!

모든 주요 사운드를 mp3 형식으로 다운로드

가장 먼저 모든 주요 사운드를 다운로드합니다. 최소 7개의 흰색 건반 소리 + 5개의 검은 건반 소리 = 모든 음계의 12개 건반 소리(1옥타브)가 있어야 합니다.
여기에서 모든 mp3 파일을 다운로드하는 것이 좋습니다 - https://freesound.org/people/Tesabob2001/packs/12995/
또는 Github에서 내 저장소의 zip 파일을 다운로드하고 -/client/src/Components/Music/Sounds로 이동하여 모두 추출할 수 있습니다.
모든 mp3 파일을 'Sounds'라는 폴더에 저장합니다.
단순성을 위해 아래 형식으로 모든 파일의 이름을 바꿉니다.

자바스크립트 코드

이제 재미있는 부분이 온다! 코드입니다. 먼저 구성 요소( js/jsx 파일 )를 만듭니다. 그런 다음 'Audio' 클래스의 개체를 만들고 해당 속성에 액세스하여 사운드를 재생해야 합니다.
샘플 코드:



우리는 각각의 모든 mp3 파일에 대한 객체를 생성할 것입니다.

  const C4 = new Audio(require('./Sounds/C4.mp3'));
  const Db4 = new Audio(require("./Sounds/Db4.mp3"));
  const D4 = new Audio(require("./Sounds/D4.mp3"));
  const Eb4 = new Audio(require("./Sounds/Eb4.mp3"));
  const E4 = new Audio(require("./Sounds/E4.mp3"));
  const F4 = new Audio(require("./Sounds/F4.mp3"));
  const Gb4 = new Audio(require("./Sounds/Gb4.mp3"));
  const G4 = new Audio(require("./Sounds/G4.mp3"));
  const Ab4 = new Audio(require("./Sounds/Ab4.mp3"));
  const A4 = new Audio(require("./Sounds/A4.mp3"));
  const Bb4 = new Audio(require("./Sounds/Bb4.mp3"));
  const B4 = new Audio(require("./Sounds/B4.mp3"));
  const C5 = new Audio(require("./Sounds/C5.mp3"));
  const Db5 = new Audio(require("./Sounds/Db5.mp3"));
  const D5 = new Audio(require("./Sounds/D5.mp3"));
  const Eb5 = new Audio(require("./Sounds/Eb5.mp3"));
  const E5 = new Audio(require("./Sounds/E5.mp3"));

다음 단계는 오디오 개체를 인수로 받아들이고 복제된 노드를 만들고 오디오를 재생하는 playSound()라는 함수를 만드는 것입니다.
cloneNode()에 대한 자세한 내용은 공식 문서 - cloneNode() MDN Docs | HTMLAudioElement MDN Docs | play() MDN Docs

  const playSound = audio => {
    // creating a cloned node of the audio object
    const clone = audio.cloneNode()

    // calling the play() method to play the mp3 file
    clone.play()
  }

다음은 useState 후크를 가져오는 것이며 피아노 키라는 이름의 변수와 부울 값을 갖는 수정자 함수를 생성할 것입니다. 이렇게 하면 특정 키를 클릭할 때 변수의 상태가 토글됩니다(의미 - 버튼을 클릭할 때). 키를 클릭하면 toggle_Key_를 'True'로 설정하고 그렇지 않으면 'False'로 설정합니다. 각각의 모든 키에 대해 useState 후크를 생성합니다.

import { useState } from 'react';

  // keys 
  const [C4Key , toggleC4key] = useState(false);
  const [Db4Key , toggleDb4key] = useState(false);
  const [D4Key , toggleD4key] = useState(false);
  const [Eb4Key , toggleEb4key] = useState(false);
  const [E4Key , toggleE4key] = useState(false);
  const [F4Key , toggleF4key] = useState(false);
  const [Gb4Key , toggleGb4key] = useState(false);
  const [G4Key , toggleG4key] = useState(false);
  const [Ab4Key , toggleAb4key] = useState(false);
  const [A4Key , toggleA4key] = useState(false);
  const [Bb4Key , toggleBb4key] = useState(false);
  const [B4Key , toggleB4key] = useState(false);
  const [C5Key , toggleC5key] = useState(false);
  const [Db5Key , toggleDb5key] = useState(false);
  const [D5Key , toggleD5key] = useState(false);
  const [Eb5Key , toggleEb5key] = useState(false);
  const [E5Key , toggleE5key] = useState(false);

다음은 onClick() 함수를 만드는 것입니다. 버튼을 눌렀을 때 호출되는 함수입니다. playSound() 및 toggleKey() 함수의 두 함수를 호출하는 함수에 이벤트 개체가 전달됩니다. 각각의 모든 키(예: 12개 키)에 대해 onClick() 함수를 생성할 것입니다.

  const playC4 = (e) => {
    playSound(C4);
    toggleC4key(true);
    setTimeout(() => {
        toggleC4key(false);
    }, 200);
  }

playDb4, playD4, playEb4 ....라는 유사한 함수를 만들고 각각의 오디오 개체를 playSound() 함수에 전달합니다.
여기서 setTimeout() 함수는 특정 키가 활성( true 로 토글됨) 상태(즉, 얼마나 오래 눌렸는지)에 있는 기간으로 사용됩니다. 값을 200ms로 설정했는데 200ms 후에 키가 꺼집니다.

다음으로 버튼 요소를 만들고 onClick() 핸들러를 정의합니다.

<button className='white-btn C4' onClick={(e)=> playC4(e)} />
<button className='Db4' onClick = {(e) => playDb4(e)} />
<button className='white-btn D4' onClick={(e)=> playD4(e)} />
<button className='white-btn E4' onClick={(e)=> playE4(e)} />
<button className='white-btn F4' onClick={(e)=> playF4(e)} />

나머지 키의 버튼도 복제하면 피아노가 완성됩니다! 도움이 필요한 경우 내 github에서 코드를 확인할 수 있습니다. - Code | 모든 mp3 오디오 파일을 추출할 수 있음Audio Files | 레포 링크 - Github Repo | 여기에서 앱을 사용하십시오Heroku App. 표지 이미지 크레딧: Wallpaper Access