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

时间:2020-09-17 16:34:18

标签: reactjs frontend web-audio-api

我制作了一个自定义播放器来播放音频。完成文件后,我无法再次播放。我得到错误: 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>
                )}
        </>
    );
}

感谢您的建议。

1 个答案:

答案 0 :(得分:0)

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

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

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

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