1분 미리듣기 구현

완성한 로직을 프로젝트에 적용시켜보자
사이드바에서 음원이 1분만 재생되도록 하려면 audio 객체에 접근해야한다.
React-h5-audio-player는 모듈이기 때문에 div태그로 감싸진 말 그대로 모듈이다.

React-h5-audioplayer의 npm 공식문서에서는 모듈을 advanced하게 사용하기 위해서
createRef(class 컴포넌트에서 Dom요소 접근법)를 사용하라고 적혀있었다.

useRef

useRef는 이전에도 블로깅 하였지만 다시 짚어보자면,
React에서 DOM요소로 접근할 수 있도록 해주는 Hook이다.

이 를 이용해서 우선 React-h5-audio-player에 참조 지정을 해주고 깊숙히 숨어있는 audio 객체에 접근하였고, 성공적으로 적용이 가능했다.

autoPlayAfterSrcChange

1분 미리듣기를 구현하면서 약간 의도치 않은 상황을 발견했다.
비로그인 상황에서 로그인을 하게되면 DB에 저장된 플레이리스트가 적용이 되는데,
이때 src 값이 플레이리스트의 마지막 곡 값으로 바뀌기 때문에 로그인하게되면 음악이 자동 재생이 되었다.
npm 공식문서를 다시 읽어보니 autoPlayAfterSrcChange 라는 속성이 있었다.
이는 음악이 변경되면 자동으로 재생하도록 해주는 속성이었다.
(이전에 음원 변경 로직도 이 때문에 src가 바뀌면 자동으로 음원이 재생되었던 것.)
이는 유지가 되긴 해야하나 처음 플레이리스트가 적용될때에는 이 속성이 적용되면 안된다.
useEffect안에서 플레이리스트를 받기전에는 이 속성을 false로 두고
오디오를 재생할때 이 state를 true로 변경하도록 하여 해결했다.
afterRender라는 state로 해당 속성 값을 설정해주고 이를 변경하도록 했다.

  const [afterRender, setAfterRender] = useState(false);

  useEffect(() => {
  	 audio.current.audio.current.onplay = () => {
      setAfterRender(true);
      play1min();
    };

    audio.current.audio.current.onpause = () => {
      play1min();
    };

    setAfterRender(false);

    if (isLogin) {
      axios.get(`${process.env.REACT_APP_API_URL}/playlist`, { headers: { accesstoken: accessToken } })
        .then(res => {
          if (res.status === 200) {
            dispatch(inputPlayList(res.data.playlist));
            if (res.data.playlist.length > 0) {
              setCurrentMusic(res.data.playlist[res.data.playlist.length - 1]);
            }
          }
        })
        .catch(err => {
          if (err.response) {
            if (err.response.status === 404) {
              dispatch(inputPlayList([]));
            }
          } else console.log(err);
        });
    } else {
      setCurrentMusic(playList[playList.length - 1]);
    }
  }, [isLogin]);


  <AudioPlayer
	...
   autoPlayAfterSrcChange={afterRender}
  />

---

오늘은 여기까지...

프로젝트에 적용시키는 부분에서 걱정이 많았는데 역시 계속해서 파고들다 보면은 해결방법이 나오긴 한다.
앞으로도 걱정보다는 일단 파고들어보자는 마음으로 임해야겠다.