javascript - React - 播放音频 onClick 在 iOS 设备上导致 "Unhandled Rejection (NotAllowedError)"？

Question

我的问题的沙盒演示: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

感谢任何帮助。

Answer 1

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

 <audio ref....> 

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