Web Audio API：用户授权后页面重载时自动播放失效（Firefox/Safari）

问题原因 #

Chrome/Edge对同域会话内的自动播放限制较宽松，只要用户有过一次主动交互，后续页面加载时允许自动激活AudioContext并播放音频。但Safari和Firefox的自动播放政策更严格：即使sessionStorage记录了用户允许的状态，新页面加载时创建的AudioContext仍处于suspended状态，单纯调用audioContext.resume()会因缺少用户交互上下文被拒绝，导致无法自动播放。

解决方案 #

核心调整点 #

1. 改用异步函数处理AudioContext的激活与音频加载，确保每一步操作的Promise都被正确处理
2. 主动检查并激活AudioContext，适配Safari/Firefox的状态限制
3. 增加错误捕获，处理播放失败的情况（比如浏览器全局禁用自动播放）

修改后的代码 #

// 读取用户是否允许自动播放的会话记录
const autoplayAllowed = window.sessionStorage.getItem("autoplay") === "1";

async function playBackgroundMusic() {
    try {
        // 初始化AudioContext，兼容webkit前缀
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        
        // 主动激活处于挂起状态的AudioContext
        if (audioContext.state === "suspended") {
            await audioContext.resume();
        }

        // 加载并解码音频文件
        const response = await fetch("counting.mp3");
        const arrayBuffer = await response.arrayBuffer();
        const decodedData = await audioContext.decodeAudioData(arrayBuffer);

        // 创建播放源并启动播放
        const bufferSource = audioContext.createBufferSource();
        bufferSource.connect(audioContext.destination);
        bufferSource.loop = true;
        bufferSource.buffer = decodedData;
        bufferSource.start(0);

        // 可选：存储AudioContext激活状态，增强后续页面的兼容性
        window.sessionStorage.setItem("audioContextActivated", "1");
    } catch (error) {
        // 播放失败时重置状态，避免后续页面重复尝试
        console.error("自动播放失败：", error);
        window.sessionStorage.setItem("autoplay", "0");
    }
}

// 用户之前允许过自动播放时，触发播放逻辑
if (autoplayAllowed) {
    playBackgroundMusic();
}

关键补充：首次用户交互的处理 #

确保第一次用户点击“确定”按钮时，操作在用户交互事件回调内执行，这是浏览器允许激活AudioContext的必要条件：

document.getElementById("allow-music-btn").addEventListener("click", async () => {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    await audioContext.resume();
    // 存储允许自动播放的状态
    window.sessionStorage.setItem("autoplay", "1");
    // 播放第一首音乐
    playBackgroundMusic();
});

额外注意事项 #

• Safari中，同域页面跳转后会话内的交互记录会保留，但需确保AudioContext的激活操作在页面加载时尽早执行
• Firefox中，若用户全局禁用自动播放，即使有会话记录也无法播放，需通过错误捕获提示用户手动开启

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