HTML5 Audioelement does not play audio on IOS 13 devices

Question

I’m a web developer for a radio station. Since the launch of IOS 13, we have received several complaints from users that our live audio broadcasts can no longer be played on IOS (iPhone) devices. On other devices reproduce the streams without any problem.

Obs.: Tests were done in one iPhone version 13.3.1 and by pressing the play button the audio was not reproduced. But in a iPad Mini version 9.3.5 has been played

Access link to the website: https://vipfm.net

To test, access the link above and press play (you must play the audio)

Part of the code where the Player is implemented:

import { Flex, Box } from "../../styles/grid";
import {
  ContainerNew,
  MusicContainerBusiness,
  NameMusic,
  InfoMusic,
  PlayButton,
  Volume,
  Sound
} from "./style";
import { FaPlay, FaPause } from "react-icons/fa";

const Player = ({ theme, width, radio, host, isNewTemplate, isMobile }) => {
  const [paused, setPaused] = useState(true);
  const [program, setProgram] = useState(false);
  const [music, setMusic] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(
        `https://music.suaradionanet.net/api/music?slug=${radio.slug}`,
        {
          headers: {
            "x-api-key": "Gr(23ksASI!k)d9OaPD6"
          }
        }
      );
      const res = await result.json();
      setProgram(res[1] ? res[0] : false);
      setMusic(res[1] ? res[1] : res[0]);
    };
    fetchData();
    setInterval(() => {
      fetchData();
    }, 100000);
  }, []);
  const handlePlayer = () => {
    const sound = document.getElementById("sound");
    setPaused(!paused);

    if (paused) sound.play();
    else sound.pause();
  };

  const handleVolume = e => {
    document.getElementById("sound").volume = e;
  };

  return (
    <ContainerNew
      width={width}
      isHeaderPlayer={radio.sitebasic.header_player}
      isNewTemplate={isNewTemplate}
      flexDirection="column"
    >
      <Flex mb={12}>
        <PlayButton onClick={handlePlayer} isBusinessCard>
          {paused ? (
            <FaPlay color={`rgb(${theme.primaryColor})`} />
          ) : (
            <FaPause color={`rgb(${theme.primaryColor})`} />
          )}
        </PlayButton>
        <Volume>
          <input
            className="volume"
            type="range"
            onChange={e => handleVolume(e.target.value)}
            min="0"
            max="1"
            step="0.1"
            defaultValue="1"
          />
        </Volume>
        {!isMobile || isMobile === "Android" ? (
          <Sound preload="none" id="sound">
            <source src={radio.streaming_link} type="audio/aac" />
            <source src={radio.streaming_link} type="audio/mpeg" />
            <source src={radio.streaming_link} type="audio/wav" />
            <source src={radio.streaming_link} type="audio/mp4" />
            <source src={radio.streaming_link} type="audio/aacp" />
            <source src={radio.streaming_link} type="audio/ogg" />
            <source src={radio.streaming_link} type="audio/webm" />
            <source src={radio.streaming_link} type="audio/flac" />
          </Sound>
        ) : (
          isMobile === "iOS" && (
            <Sound preload="none" id="sound">
              <source src={`${radio.streaming_link}.m3u`} type="audio/aac" />
              <source src={`${radio.streaming_link}.m3u`} type="audio/mpeg" />
              <source src={`${radio.streaming_link}.m3u`} type="audio/wav" />
              <source src={`${radio.streaming_link}.m3u`} type="audio/mp4" />
              <source src={`${radio.streaming_link}.m3u`} type="audio/aacp" />
              <source src={`${radio.streaming_link}.m3u`} type="audio/ogg" />
              <source src={`${radio.streaming_link}.m3u`} type="audio/webm" />
              <source src={`${radio.streaming_link}.m3u`} type="audio/flac" />
            </Sound>
          )
        )}
      </Flex>
      <MusicContainerBusiness>
        {music && <NameMusic>{music.music}</NameMusic>}
        {program && (
          <InfoMusic>
            {program.program} - {program.time_begin} / 23:00h
          </InfoMusic>
        )}
      </MusicContainerBusiness>
    </ContainerNew>
  );
};

export default Player;

Does anyone have an idea of why our flows no longer work and can give us advice on what we can do to make them work again?