javascript - react -播放音频onClick在iOS设备上导致 “Unhandled Rejection (NotAllowedError)”吗？

我的问题的沙盒演示:https://codesandbox.io/s/jolly-fermat-j23w9

我正在尝试在我的React网站上实现一个功能，用户单击一个元素，然后播放音频。

在桌面上，这可以正常工作。但是在iOS设备上，我遇到了“未处理的拒绝(NotAllowedError)”。此错误通常是由于在iOS设备上自动播放媒体引起的。但是，在这种情况下，用户必须单击该元素才能开始音频，因此不会发生此错误。

我的怀疑是，由于组件会根据状态变化而重新呈现，因此React不知道用户必须与站点进行交互才能触发音频。

这是基本代码:

// audio playing function, found on this stackoverflow question:
// https://stackoverflow.com/questions/47686345/playing-sound-in-reactjs
const useAudio = url => {
  const [audio] = useState(new Audio(url));
  const [playing, setPlaying] = useState(false);

  const toggle = () => setPlaying(!playing);

  useEffect(() => {
    playing ? audio.play() : audio.pause();
  }, [playing]);

  return [playing, toggle];
};

// url of audio is passed in as prop from App.js
const PlayAudio = ({ url }) => {
  const [playing, toggle] = useAudio(url);

  return (
    <>
      <PlayButton onClick={toggle}>{playing ? "Pause" : "Play"}</PlayButton>
    </>
  );
};

在使用Safari，Chrome和Firefox浏览器的iPhone上进行了测试。

同样，可以在此处找到完整的工作演示，并且您需要在iOS设备上进行检查以查看错误:https://codesandbox.io/s/jolly-fermat-j23w9

任何帮助表示赞赏。

最佳答案

使用您的代码创建示例，但使用另一种方法:

 <audio ref....>

https://codesandbox.io/s/elegant-black-c0jr8