当音乐改变时AudioContext暂停

Question

标题： AudioContext 在 Web Audio API 中的轨道转换期间进入挂起状态

身体： 您好，我正在使用 Web Audio API 和 React 开发音乐播放器应用程序，我遇到了一个问题，

AudioContext

经常进入挂起状态，中断播放。自动曲目切换期间会发生这种情况。

这是我的实现的简要概述：

AudioContext的初始化：

const [audioContext, setAudioContext] = useState(null);

useEffect(() => {
    if (!audioContext) {
        const context = new (window.AudioContext || window.webkitAudioContext)();
        setAudioContext(context);
    }
}, [audioContext]);

播放曲目：

const play = () => {
    if (audioContext && audioBuffer && !isPlaying) {
        const sourceNode = audioContext.createBufferSource();
        const gainNode = audioContext.createGain();
        sourceNode.buffer = audioBuffer;
        sourceNode.connect(gainNode);
        gainNode.connect(audioContext.destination);
        gainNode.gain.value = volume / 100;
        sourceNode.start(0, position);
        setSource(sourceNode);
        setIsPlaying(true);
    }
};

最后切换到下一首：

const playNextTrack = useCallback(() => {
    setAudioBuffer(null);
    setAudioContext(null);
    setPosition(0);
    setTotalPausedTime(0);
    setCurrentTrackIndex((prevIndex) => (prevIndex + 1) % musics.musicInfo.length);
    setIsPlaying(true);
}, [musics.musicInfo.length]);

const updatePosition = useCallback(() => {
    const update = async () => {
        if (!isPlaying || !source || !audioContext) return;

        const currentTime = audioContext.currentTime - totalPausedTime;
        setPosition(Math.floor(currentTime));

        if (currentTime >= (audioBuffer?.duration)) {
            playNextTrack();
        }
    };

    update();
}, [totalPausedTime, audioBuffer?.duration, audioContext, isPlaying, playNextTrack, source]);

当用户单击按钮时，

playNextTrack

函数会起作用，但是当在轨道末尾调用它时，上下文会进入暂停状态...

我尝试重新启动上下文，它可以工作，但需要用户交互，这不是我的目标：

if (audioContext.state === 'suspended') {
    try {
        await audioContext.resume();
        console.log('AudioContext resumed');
    } catch (error) {
        console.error('Error resuming AudioContext:', error);
    }
}

我希望一旦用户开始阅读，歌曲之间的更改就会自动完成。

如果您需要任何说明，请随时询问。提前非常感谢！

Answer 1

如果我正确理解你的代码，它会在每次播放新曲目时创建一个新的

AudioContext

。没有必要这样做。您可以继续使用已运行的现有

AudioContext

。