[React] react-h5-audio-player 랜더링 시 자동재생 문제 해결

요번에 프로젝트를 진행하면서 음악을 변경하면 바로 자동 재생이 되는 문제가 생겼다.

대략 위와 같은 플레이어 인데 react-h5-audio-player를 사용했다.

첫번 째 도전
플레이어에서 autoPlay를 props로 제공하니 이걸 이용하자!
영락 없이 실패

열심히 구글링을 하면서 react만 중요하다고 생각 했던 나에게 MDN 공식문서의 audio 태그들은 나에게 매우 중요한 요소로 다가왔다.

• 항상 html과 바닐라 js는 중요하지 않다고 생각했는데 오산 이였던 것

-node_modules/react-h5-audio-player/src 까지 들어가보면 HTMLAudioElement를 이용해서 플레이어를 만들어서 내보내는 것을 확인 할 수 있다.

• 지금까지는 만들어진 모듈을 사용만 하면 그만이였는데 이제는 그 안까지 들어가서 확인을 하고 사용하여야 한다.

import { createRef, useEffect, useRef } from 'react';
import AudioPlayer from 'react-h5-audio-player';
import { useAppSelector } from '../hooks/useSelector';
import { RootState } from '../modules';
// import 'react-h5-audio-player/lib/styles.less' Use LESS
// import 'react-h5-audio-player/src/styles.scss' Use SASS

export default function Player() {
  const { selectNum, musics } = useAppSelector(({ music }: RootState) => ({
    selectNum: music.selectNum,
    musics: music.musics,
  }));
  const player = useRef<any>(); // -1-
  useEffect(() => {
    player.current.audio.current.pause();  // -3-
  }, [selectNum]);

  return (
    <AudioPlayer
      src={musics[selectNum].musicURL}
      showDownloadProgress={true}
      autoPlay={false}
      preload={'metadata'}
      volume={0.3}
      ref={player} // -2-
    />
  );
}

1. useRef를 이용해서 player 정의
   • typescript 사용 타입 유추가 뭔지 몰라서 일단 any로 지정
   • 안해주면 실행은 되지만 보기가 안좋음
2. ref 속성에 player 지정
3. useEffect를 사용해서 랜더링 시 플레이어 자동 재생되던 버그 수정
   • 최적화 부분을 일단 나중에 생각
   • dependency에 선택 number를 넣어서 변경 될 때만 플레이어가 멈추도록 설정

• 위와 같이 했더니 내 의도대로 플레이어가 동작했다.

교훈
html, js 기본을 충실히 하자