detail 페이지에서 벗어나도 음악이 계속 재생되는 이슈

[new-crystal]

2023-08-08.8.11.37.mov

1. useEffect의 return 함수 사용하기
2. removeEventListener 활용하기
3. 코드

useEffect(() => {
    const audio = new Audio(playList);

    const timeUpdateHandler = () => {
      setCurrentTime(audio.currentTime);
      setRatio((audio.currentTime / audio.duration) * 100);
      if (audio.duration === audio.currentTime) {
        setPlaying(false);
      }
    };

    if (playing) {
      audio.play().then(() => {
        audio.addEventListener("timeupdate", timeUpdateHandler);
      });
    } else {
      audio.pause();
      audio.removeEventListener("timeupdate", timeUpdateHandler);
    }

    return () => {
      audio.pause();
      audio.removeEventListener("timeupdate", timeUpdateHandler);
    };
  }, [playing, playList, setPlaying]);

페이지를 벗어나면 음악이 정지 됩니다.