移动端JS每秒蜂鸣仅响一次，桌面Chrome正常，求修复方案

这个问题我之前也碰到过，本质是移动端浏览器的音频自动播放限制政策在搞事情！桌面端Chrome对音频自动播放的限制没那么严，但移动端（不管是安卓还是iOS的Safari/Chrome）为了避免打扰用户，会限制非用户主动触发的连续音频播放——第一次播放可能因为某些巧合（比如测试时不小心点了屏幕）通过了，但后续的自动播放就被浏览器直接拦截了。

下面给你几个可行的解决办法，按优先级推荐：

1. 必须通过用户交互触发音频初始化 #

移动端浏览器要求所有音频播放的“权限”必须由用户主动操作（点击、触摸）来开启，所以第一步要把音频的初始化逻辑放在用户交互事件里：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * { box-sizing: border-box; }
        body { font-family: Arial; margin: 0; padding: 2rem; text-align: center; }
    </style>
</head>
<body>
    <h1>点击页面开始蜂鸣</h1>

    <script>
        let beepAudio;
        let beepInterval;

        // 监听用户第一次点击/触摸事件，仅触发一次
        document.body.addEventListener('click', initBeep, { once: true });

        function initBeep() {
            // 初始化复用的蜂鸣音频对象（用base64内嵌避免跨域和加载问题）
            beepAudio = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmGgU7k9n1unEiBC13yO/eizEIHWq+8+OWT');
            
            // 启动每秒蜂鸣
            beepInterval = setInterval(() => {
                // 重置音频播放起点，避免重复加载
                beepAudio.currentTime = 0;
                // 捕获播放失败的错误，方便排查
                beepAudio.play().catch(err => console.log('蜂鸣播放失败:', err));
            }, 1000);
        }

        // 页面卸载时清除定时器，避免内存泄漏
        window.addEventListener('beforeunload', () => {
            if (beepInterval) clearInterval(beepInterval);
        });
    </script>
</body>
</html>

2. 备选方案：使用Web Audio API #

如果上面的Audio对象方案还是有问题，可以试试Web Audio API——它的控制更精细，只要用户交互过一次创建了音频上下文，后续的自动播放通常不会被拦截：

// 在initBeep函数里替换成这段代码
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
function playBeep() {
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);
    oscillator.frequency.value = 800; // 蜂鸣频率，可调整
    oscillator.type = 'sine'; // 音频波形
    // 控制音量渐变，避免突兀
    gainNode.gain.setValueAtTime(1, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.1);
    oscillator.start(audioContext.currentTime);
    oscillator.stop(audioContext.currentTime + 0.1);
}

beepInterval = setInterval(playBeep, 1000);

关键点说明 #

• 用户交互触发：这是移动端浏览器的硬性要求，必须由用户主动点击/触摸才能解锁音频播放权限，后续的自动播放才会被允许。
• 复用音频对象：每次播放前重置currentTime=0，避免重复加载音频文件，也更容易通过浏览器的播放限制检查。
• 错误捕获：加上play().catch()可以帮你排查后续可能出现的播放拦截问题。

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