音频结束后不播放。反应/

Question

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

感谢您的建议。

Answer 1

我认为你的代码没有错误

在这里你可以看到我试过的版本

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

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

音频结束后不播放。反应/

Audio does not play after it ends. React/

frontend

reactjs

web-audio-api