프로젝트에 use-sound 적용하기

use-sound 라이브러리를 선택한 이유

진행중인 프로젝트에 audio를 삽입해 구현해야 하는 기능이 있었다.

1. 특정 컴포넌트 클릭 시 오디오 재생
2. 특정 페이지 접속 시 오디오 재생

이렇게 총 두 가지 기능을 구현해야 했다.
우선적으로, 구현해야 하는 기능이 복잡하지 않았고, vercel에서 제공하는 무료 버전으로 배포할 생각이었기에 라이브러리의 번들 크기가 작아야 했다.

react에서 오디오를 다룰 수 있는 라이브러리는 여러 가지가 있다.

- use-sound

장점 : 간단한 훅 기반 API, 번들 크기 작음.
단점 : 고급 기능은 부족함.

- React-Howler (Howler.js를 React에 최적화한 라이브러리)

장점 : Web Audio API 기반, 여러 사운드 포맷 지원, 사운드 그룹 및 컨트롤 기능 제공
단점 : 상대적으로 번들 크기가 큼

- Tone.js

장점: 오디오 생성 관련 고급 기능 제공, Web Audio API 기반 사용 편리
단점: 번들 크기가 큼, 단순한 오디오 재생 구현에는 적합하지 않음.

- React-Sound

장점 : 컴포넌트 기반, 편리하게 사운드 재생 기능 구현 가능
단점 : 최근 업데이트 없음.

이중에서 프로젝트에 맞는 라이브러리는 use-sound,React-Sound였고 최근 업데이트가 없는 React-Sound를 제외한 use-sound를 사용하기로 했다.

구현

1.설치

npm install use-sound

만약 프로젝트에서 typeScript를 사용한다면 @types/howler 패키지를 추가로 설치하면 된다.

2.적용

간단한 라이브러리인 만큼, 사운드 적용 방법은 어렵지 않다.

• 컴포넌트 클릭시 사운드 재생

import useSound from "use-sound";

const MainPage = () => {
  const [play] = useSound("/sounds/Cat Mew 3.mp3");
  
  ...
  
  return ( 
          <Icon
                onClick={() => {
                  play();
                }}
                ref={nodeRef}
              >
                <Img src={"/images/spellbook.png"} />
                <Name>{"Necronomicon"}</Name>
           </Icon>
        </>
  );
};

export default MainPage;

• 페이지 진입 시 사운드 재생

import useSound from "use-sound";

const SoundPage = () => {
 const [play, { stop }] = useSound("/sounds/train3.mp3", { volume: 1 });
  const isPlayed = useRef(false);

  useEffect(() => {
    if (!isPlayed.current) {
      play();
      isPlayed.current = true;
    }

    return () => stop();
  }, []);

  return <h1>Hello World!</h1>;
};

export default MainPage;

단, 브라우저 정책에 의하여 (특히 Chrome과 Safari) 사용자의 상호작용 없이 사운드가 자동 재생되는 기능이 막힐 수 있으므로 유의해야 한다!