音频在结束后无法播放反应/

问题描述

我制作了一个自定义播放器来播放音频。完成文件后，我无法再次播放。我得到错误： Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). 但是我不确定错误是否成立。

const usePlayer = (src: string) => {
    const [audio] = useState(new Audio(src));
    const [playing,setPlaying] = useState(false);

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

    return {
        playing,setPlaying
    }
};

const Player = ({src}) => {
    const {playing,setPlaying} = usePlayer(src);

    return (
        <>
                {playing ? (
                    <button onClick={() => setPlaying(false)}>
                        pause
                    </button>
                ) : (
                    <button onClick={() => setPlaying(true)}>
                        play
                    </button>
                )}
        </>
    );
}

感谢您的建议。

解决方法

我认为您的代码不包含错误

在这里您可以看到我尝试的版本

我添加了一个额外的代码段

https://codesandbox.io/s/suspicious-tu-uiqmg?file=/src/App.js