基于React+Web Audio API的音乐播放器切换曲目时AudioContext挂起问题

核心问题分析 #

你的代码中playNextTrack函数调用了setAudioContext(null)，这会销毁当前的AudioContext实例。当自动切歌时重新创建上下文时，由于没有用户交互触发（浏览器的自动播放安全策略要求AudioContext必须通过用户交互激活），新创建的上下文会直接进入**挂起（suspended）**状态，导致播放中断。而手动点击切歌时，用户交互本身会激活上下文，所以功能正常。

解决方案 #

1. 复用AudioContext，避免频繁销毁重建

Web Audio API的设计初衷就是复用单个上下文处理多个音频源，不需要每次切歌都重建上下文。移除playNextTrack中销毁上下文的逻辑：

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

2. 用ended事件替代定时检测曲目结束

定时更新位置的方式容易出现时间计算误差，改用音频源节点的ended事件触发切歌，更准确可靠：

const play = async () => {
    let context = audioContext;
    // 首次播放时在用户交互中创建并激活上下文
    if (!context) {
        context = new (window.AudioContext || window.webkitAudioContext)();
        setAudioContext(context);
        // 因用户交互触发，resume可正常执行
        if (context.state === 'suspended') {
            await context.resume();
        }
    }

    if (context && audioBuffer && !isPlaying) {
        const sourceNode = context.createBufferSource();
        const gainNode = context.createGain();
        
        sourceNode.buffer = audioBuffer;
        sourceNode.connect(gainNode);
        gainNode.connect(context.destination);
        gainNode.gain.value = volume / 100;

        // 监听曲目结束事件，自动切歌
        sourceNode.addEventListener('ended', playNextTrack);
        
        sourceNode.start(0, position);
        setSource(sourceNode);
        setIsPlaying(true);
    }
};

3. 添加资源清理逻辑，避免内存泄漏

在组件卸载或切换曲目时，清理音频源节点的事件监听并停止播放：

useEffect(() => {
    return () => {
        if (source) {
            source.removeEventListener('ended', playNextTrack);
            source.stop();
        }
    };
}, [source, playNextTrack]);

4. 优化上下文初始化时机

将AudioContext的初始化移至用户首次点击播放的交互中，而非自动初始化，确保上下文被用户交互激活，符合浏览器安全策略。

关键原理 #

浏览器的自动播放策略规定：AudioContext必须通过用户交互（如点击、触摸）激活。一旦上下文被用户交互激活，后续的自动操作（如切歌时复用上下文）不会触发挂起，因为上下文已处于激活状态。

内容的提问来源于stack exchange，提问作者Killian Colla