[ React ] 아이콘 누르면 음악 재생되는 기능

 

사이드 프로젝트 중, 아이콘을 누르면 음악이 재생되는 기능이 필요했다. 

 

Off 아이콘으로 보이면 음악이 꺼져있다는 것이고,

Up 아이콘으로 보이면 음악이 실행중이라는 뜻이다. 

이 둘 아이콘은 mui에서 가져왔다. 

const [isPlay, setIsPlay] = useState<boolean>(false);
const audio = new Audio(music);

  const onClickVolume = () => {
    // 재생 중
    if (isPlay) {
      audio.pause();
      setIsPlay(false);
    } else {
      audio.play();
      setIsPlay(true);
    }
  };

 

 

 

1. 첫 번째 오류

Cannot find module 'mp3 경로' or its corresponding type declarations. 

 

https://stackoverflow.com/questions/71205222/how-to-fix-the-cannot-find-module-mp3-file-or-its-corresponding-type-declaration

How to fix the Cannot find module mp3 file or its corresponding type declarations

 

src/react-app-env.d.ts

이 파일에 추가해주니 정상적으로 재생이 되었다. 

declare module '*.mp3'

 

 

2. 중지가 안 됨

pause가 제대로 먹지 않는 오류가 있었다. 중지하는 의미의 아이콘을 눌렀다가 다시 재생아이콘을 누르자 음악이 겹재생되는 이슈도 있었다. 예전에 카카오맵 API 연결할 때도 비슷한 이슈가 있었다. 초기 렌더링과 언마운트시 리스너 정리 등을 해주어야 했다. 

 

const [audio] = useState(new Audio(music)); // audio 객체 생성

  useEffect(() => {
    const handleEnded = () => {
      // 음악이 끝났을 때 할 작업
      setIsPlay(false);
    };

    audio.addEventListener("ended", handleEnded);

    // 언마운트 시 이벤트 리스너 정리
    return () => {
      audio.removeEventListener("ended", handleEnded);
    };
  }, [audio]);

 

이런식으로 작성해주면 해결이 된다. 그런데.. React 스러운 코드는 아니라는 생각이 들었다. 

 

https://velog.io/@chocolajin/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%98%A4%EB%94%94%EC%98%A4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-with-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%A6%AC%EC%BD%94%EC%9D%BC

리액트 오디오 컴포넌트 만들기 with 타입스크립트 & 리코일

 

이 게시물을 보고, ref을 사용하여 audio 객체를 관리를 해주었다. 

 

const myRef = useRef<HTMLAudioElement>(null);

  const onClickVolume = () => {
    // 재생 중
    if (isPlay) {
      myRef.current?.pause();
      setIsPlay(false);
    } else {
      // 음악 재생
      myRef.current?.play();
      setIsPlay(true);
    }
  };
  
  return (
    <>
      <InvBGMBlock>
        <div className="volume__box" onClick={onClickVolume}>
          {isPlay && <VolumeUpIcon />}
          {!isPlay && <VolumeOffIcon />}
          <audio ref={myRef} src={music}></audio>
        </div>
      </InvBGMBlock>
   ...생략

 

잘 된다! 👏👏