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

Question

我在chrome dev工具中不断收到这个错误，但找不到修复的方法。

知道吗？

我的代码：

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);
}}
>

Answer 1

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

试试之类的东西

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