音乐暂停时音频标签继续加载

Question

I keep getting my network tab to show my player fetching data while the music is paused. I let it play for 5sec and it keeps loading for minutes while it is paused.

my code

  const [playing, setPlaying] = useState<boolean>(false);
  const musicPlayers = useRef<HTMLAudioElement | undefined>(
    typeof Audio !== "undefined"
      ? new Audio("ss")
      : undefined
  );
  useEffect(() => {
    playing ? musicPlayers.current?.play() : musicPlayers.current?.pause();
  }, [playing]);

           <button onClick={() => {
              setPlaying(!playing);
              //  setPlaying(!playing);
              // setIsPlaying(!isPlaying);
            }}
          ></button>

any idea why this is happening?

Answer 1

To the solution was to do this for chrome (the problem was only on chrome)

useEffect(() => {
    if (!playing) {
      musicPlayers.current?.pause();
      musicPlayers.current = new Audio("");
    } else {
      musicPlayers.current = new Audio("s");
      musicPlayers.current?.play();
    }
  }, [playing]);