Firefox中方向键不被视为用户手势致AudioContext无法播放音频

问题描述 #

开发的方向键交互音频游戏在Chrome、Safari中正常运行，但Firefox存在异常：ArrowUp、ArrowLeft、ArrowRight、ArrowDown方向键不被视为有效用户手势，导致AudioContext无法播放音频；而W/A/S/D等按键可正常触发。控制台输出错误：

An AudioContext was prevented from starting automatically. It must be created or resumed after a user gesture on the page.

已将该问题上报为Firefox Bug #1897649，且不想通过添加游戏启动按钮的方式解决（不符合艺术设计需求），需要跨浏览器的解决方案或规避方法。

复现步骤 #

• 打开演示页面
• 按下ArrowUp/Down/Left/Right方向键

预期与实际结果 #

• 预期：所有浏览器按下方向键时均播放声音
• 实际：仅Safari和Chrome播放声音，Firefox无声音

解决方案 #

核心思路是在用户按键（包括方向键）的交互回调中，主动检查并恢复AudioContext的状态，确保音频播放操作处于用户手势上下文内。修改后的代码如下：

<code>press a key to see if it sounds: </code>
<script>
    const code = document.querySelector('code')
    let audioCtx = new AudioContext({})
    const oscillatorGainNode = audioCtx.createGain()
    oscillatorGainNode.gain.value = 0.2
    oscillatorGainNode.connect(audioCtx.destination)

    const beep = async () => {
        // 检查AudioContext状态，若暂停则恢复
        if (audioCtx.state === 'suspended') {
            await audioCtx.resume()
        }
        const oscillator = audioCtx.createOscillator()
        oscillator.type = "square"
        oscillator.frequency.value = 220 + ((Math.random() * 9) | 0) * 32
        const msDelay = 0
        const msDuration = 200

        oscillator.connect(oscillatorGainNode)
        oscillator.start(audioCtx.currentTime + msDelay / 1000)
        oscillator.stop(audioCtx.currentTime + msDelay / 1000 + msDuration / 1000)
    }

    window.onkeydown = async (ev) => {
        await beep()
        code.textContent += ev.key + ' '
    }
</script>

方案说明 #

1. 用async/await处理audioCtx.resume()的异步操作，确保恢复完成后再创建振荡器播放音频
2. 在beep函数开头检查AudioContext状态，当处于suspended状态时调用resume()——该操作在用户按键回调中执行，属于Firefox认可的用户手势上下文
3. 移除了原代码中重复的oscillatorGainNode.connect(audioCtx.destination)（初始化时已完成连接，无需重复执行）

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