리액트에서 음악 재생하기

useState 로 음악 재생 상태 관리하기

const [isPlaying, setIsPlaying] = useState(false);

const playMusic = () => {

    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
    }

    setIsPlaying(!isPlaying);
  }

useState 값을 불리언값인 false로 설정한다. 그리고 버튼 클릭 시 실행되는 함수 playMusic 에서 audio가 일시정지(paused)상태라면 재생하고, 아니면 멈추도록 조건문을 작성했다.

조건문 실행 후 setPlaying 으로 isPlaying 상태를 토글하여 state를 업데이트 했다. 이것은 음악 재생 state 를 바꾸는 로직이다.

useRef 로 정지 문제 해결하기

useState 로만 오디오 재생을 구현했는데 오류가 발생했다. 버튼을 누르면 음악 재생은 되는데 다시 누른 경우 정지가 안되고 중첩으로 재생되는 문제가 있었다.

const [isPlaying, setIsPlaying] = useState(false);
  const audioRef = useRef(new Audio('./ex.mp3'));

  const playMusic = () => {
    const audio = audioRef.current;

    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
      audio.currentTime = 0;
    }

    setIsPlaying(!isPlaying);
  }

바로 useRef 가 이것을 해결해 주었다. 공식문서에서 useRef 는 렌더링에 필요하지 않은 값을 참조할 수 있는 React 훅이라고 한다.

내가 사용한 이유는 useRef 가 current 로 DOM 요소에 접근 가능하도록 하기 때문이다. audio 파일을 useRef 로 감싸준 다음 playMusic 함수에서 audio를 current 값으로 명시했다.

여기가 제일 중요한데 audio 가 paused 가 아니라면 정지한 다음 audio.currentTime 을 0으로 설정했다. 이렇게 하면 재생 중이던 것이 일시정지되고 다시 재생할 때 처음부터 다시 재생하게 된다.
0으로 설정하지 않고 그냥 렌더링 하면 원래 원래 듣던 부분부터 다시 재생되는 일시정지 기능으로도 사용할 수 있다.