html5音频在移动设备上不起作用（使用react js）

Question

我在React JS中托盘制作音频mp3歌曲。它在桌面上运行良好。在手机上不起作用。当使用静态网址作为来源时，它可以在移动设备上使用。使用https url时不起作用。有一些代码：

const [audio, setAudio] = useState(() => {
   let path = props.name + ".mp3";
   let url = "https://cdn.sitename.com/audio/128/" + path;
   return url;
 });

 <audio
      preload="none"
      className="Audio-player"
      ref={audioEl}
      controls
      loop={repeat}
      onPlay={handleStart}
      onEnded={handleEnded}
    >
    <source src={audio} type="audio/mpeg" />
    Your browser does not support the audio tag.
 </audio>

此代码有效：

const [test, setTest] = useState("https://cdn.sitename.com/audio/128/3.mp3");     
<audio controls ><source src={test} type="audio/mpeg" /> </audio>

当我们的回调函数处于状态时为什么不起作用。另外，我在单击按钮时播放音频。此外，不适用于移动设备。

const startPlay = () => {
audioEl.current.pause();
audioEl.current.load();
let apiData = "https://cdn.sitename.com/audio/data/";
let start = 1;
fetch(apiData)
  .then((res) => res.json())
  .then(
    (result) => {
      let resOb = result.data.audio;
      resOb.map((item, index) => {
          start = item.number;
          let url = "https://cdn.sitename.com/audio/128/" + start + ".mp3";
          setAudio(url);
          audioEl.current.play();
        
      });
    },
    (error) => {
      console.log(error);
    }
  );

};