react-sounds

최근 프로젝트 작업 중에 사운드 관련 요청이 있어서 찾아본 react-sounds를 정리해 본다.

 

react-sounds

• react-sounds는 React 환경에서 고품질 오디오 기능을 쉽게 구현할 수 있도록 설계된 현대적인 오디오 라이브러리이다.
• 복잡한 오디오 로직을 간단하고 직관적인 선언형 API로 추상화하여 제공합니다.사운드 재생 여부를 JSX 문법으로 표현할 수 있으며, 상태 기반 UI와 자연스럽게 연결됩니다.
• useSound, useMusic 등의 커스텀 훅을 제공하며 오디오 로직을 컴포넌트의 생명주기나 사용자 인터랙션에 따라 쉽게 제어할 수 있습니다. 
• MP3, OGG, WAV 등 다양한 오디오 포맷을 지원합니다.
• 72가지에 이르는 고품질 사운드 효과를 기본으로 제공합니다. 버튼 클릭, 페이지 전환, 알림, 배경 음악, 게임 효과음, 환경음 등 다양한 상황에 맞는 사운드를 미리 준비해 두었기 때문에, 복잡한 오디오 제작 없이도 빠르게 몰입감 있는 사용자 경험을 구축할 수 있습니다. 

 

설치 방법

npm install react-sounds howler

 

howler.js

• react-sounds를 사용할 때 필수적으로 함께 사용하는 howler.js는 웹 오디오를 보다 강력하고 쉽게 다룰 수 있게 해주는 핵심 라이브러리입니다. react-sounds는 내부적으로 howler.js를 기반으로 구현되어 있는데, 실제 오디오 재생과 제어는 howler.js가 담당하며, react-sounds는 이를 React 스타일의 컴포넌트와 훅으로 감싸서 더 쉽게 사용할 수 있게 만든 것입니다.
• howler.js는 웹 브라우저에서 고품질 오디오를 다루기 위한 JavaScript 오디오 라이브러리입니다. Web Audio API나 HTML5 Audio의 복잡한 사용법을 추상화하여, 간단한 API로 사운드 재생, 제어, 볼륨 조절, 루프, 페이드 등 다양한 기능을 제공합니다.

 

버튼 클릭 시 효과음 재생시키기

import React, { useState } from 'react';
import { Sound } from 'react-sounds';

const ClickButton = () => {
  const [playSound, setPlaySound] = useState(false);

  const handleClick = () => {
    setPlaySound(true);
    setTimeout(() => setPlaySound(false), 100); // 재생 후 false로
  };

  return (
    <>
      <button onClick={handleClick}>Click me!</button>
      <Sound src="/sounds/click.mp3" play={playSound} />
    </>
  );
};

 

배경 음악을 반복적으로 재생시키기

import { useSound } from 'react-sounds';

const BackgroundMusic = () => {
  const [play, { stop }] = useSound('/sounds/bgm.mp3', { loop: true });

  return (
    <div>
      <button onClick={play}>Play Music</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
};

 

오디오 스프라이트(Audio Sprites)

• 여러 짧은 사운드를 하나의 오디오 파일에 넣고, 시작 시간과 길이를 지정해 부분만 재생하는 기술으로 useAudioSprite라는 훅을 통해 오디오 스프라이트를 쉽게 사용할 수 있게 해줍니다.

// useAudioSprite 훅 사용
import { useAudioSprite } from 'react-sounds';

const SpriteExample = () => {
// sprite 정의 [ 오디오 파일과 함께 사운드의 위치 정보(시작 위치, 지속 시간)를 명시 ]
  const play = useAudioSprite('/sounds/sprites.mp3', {
    sprite: {
      click: [0, 300],
      success: [500, 500],
      error: [1100, 700],
    },
  });

  return (
    <div>
      <button onClick={() => play('click')}>Click</button>
      <button onClick={() => play('success')}>Success</button>
      <button onClick={() => play('error')}>Error</button>
    </div>
  );
};