【发布时间】：2019-10-22 03:38:14
【问题描述】：
我的问题的沙盒演示：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
感谢任何帮助。
【问题讨论】：
-
在 Android 设备和 Chrome 77.03865.116 上测试过，并且可以播放。
-
但是您可以尝试使用音频参考的另一种方式：
-
谢谢@Oleg。在一些简短的测试中，我可以确认使用 refs 将避免我原来问题中的错误。虽然这在功能上解决了我的问题，但我仍然会留下这个问题，因为我仍然想知道这个错误发生的确切原因，而且因为我已经在我的项目中使用了大量的 refs，而 React 文档建议不要过度使用它们。
-
我还将编辑问题以澄清这似乎是严格的 iOS 问题，而不是移动问题。感谢您进行测试。
-
你能在IOS中试试这个示例吗：codesandbox.io/s/lpzr84p39z
标签： javascript ios reactjs audio