Audio tag keeps loading when music is paused

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?

can you try it with a different browser? According to this post, chrome is the only one that load audio elements continuously, and you can prevent it by setting the src to `""` or the position to `0` https://stackoverflow.com/questions/14834520/html5-audio-stop-function — StarshipladDev, May 19 '21 at 22:57

score 1 · Accepted Answer · answered May 20 '21 at 08:59

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]);

Audio tag keeps loading when music is paused

1 Answers1