DOMException: play() 请求被对 pause() 的调用中断答案

【问题标题】：DOMException: The play() request was interrupted by a call to pause()DOMException: play() 请求被对 pause() 的调用中断
【发布时间】：2021-05-19 19:50:42
【问题描述】：

我在 chrome 开发工具中不断收到此错误，但找不到修复方法。

有什么想法吗？

我的代码：

      const [playing, setPlaying] = useState<boolean>(false);
      const musicPlayers = useRef<HTMLAudioElement>(
        new Audio("url")
      );
      useEffect(() => {
        playing ? musicPlayers.current?.play() : musicPlayers.current?.pause();
      }, [playing]);

          <button
            onClick={() => {
              setPlaying(!playing);
            }}
          >

【问题讨论】：

playing 状态是否在您的代码中某处发生了变化？
您好，抱歉，忘记添加了
我的第一个直觉是播放音频的动作也会改变状态，导致音频立即暂停（因为useEffect 触发）。如果这是您更改此状态的唯一地方，也许不是那样。也许您可以通过在函数开头添加一些日志（在playing ? ... 部分之前）来检查每次播放音频时useEffect 被触发的次数。这可能不是问题，我只是想确定

标签： reactjs next.js

【解决方案1】：

您也可以考虑不将音频的播放状态保存在组件的状态中，而是直接检查元素。

试试类似的东西

const toggleAudio = () => {
   if(musicPlayers.current?.paused && 
      musicPlayers.current?.currentTime > 0 && !musicPlayers.current?.ended) {
      musicPlayers.current?.play();
   } else {
      musicPlayers.current?.pause();
   }
}

...

 <button onClick={toggleAudio}>

【讨论】：