HTML5 Audio API播放异常：窗口失焦闲置后需用户重新交互

这个问题的核心是浏览器的自动播放安全策略：为了避免未经用户许可的音频打扰，浏览器会在页面进入后台、长时间闲置后，回收之前通过用户交互获得的音频播放授权。此时再调用audio.play()就会触发权限错误。

以下是具体的解决方向：

1. 页面切回时重新获取用户交互授权 #

监听页面的可见性变化，当用户从后台切回页面时，主动尝试恢复权限，失败则提示用户进行简单交互重新触发授权。

示例代码：

const audio = new Audio('/audio/ping.mp3');
let canPlayAudio = true;

// 监听页面可见状态
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    // 尝试用静音播放绕过部分限制，快速恢复权限
    audio.muted = true;
    audio.play()
      .then(() => {
        canPlayAudio = true;
        audio.pause();
        audio.muted = false;
      })
      .catch(() => {
        canPlayAudio = false;
        // 显示授权提示按钮
        const authBtn = document.createElement('button');
        authBtn.textContent = '点击恢复音频通知';
        authBtn.style.position = 'fixed';
        authBtn.style.top = '20px';
        authBtn.style.right = '20px';
        authBtn.addEventListener('click', () => {
          audio.play()
            .then(() => {
              canPlayAudio = true;
              authBtn.remove();
            });
        });
        document.body.appendChild(authBtn);
      });
  }
});

// 定时器调用的播放函数
function triggerNotification() {
  if (canPlayAudio) {
    audio.play().catch(err => {
      canPlayAudio = false;
      console.error('音频播放失败，需用户交互授权');
    });
  }
}

2. 联动页面状态管理定时器 #

当页面处于后台时，暂停定时器或记录未触发的通知，等页面回到前台且用户完成交互后，再补播通知，避免权限错误同时不遗漏通知：

let timerId;
let pendingNotifications = 0;

// 页面回到前台时补播通知、重启定时器
window.addEventListener('focus', () => {
  while (pendingNotifications > 0 && canPlayAudio) {
    audio.play();
    pendingNotifications--;
  }
  timerId = setInterval(triggerNotification, 60000);
});

// 页面进入后台时暂停定时器
window.addEventListener('blur', () => {
  clearInterval(timerId);
});

function triggerNotification() {
  if (document.visibilityState === 'visible' && canPlayAudio) {
    audio.play().catch(err => {
      canPlayAudio = false;
    });
  } else {
    // 后台时记录待播放通知
    pendingNotifications++;
  }
}

3. 利用静音预加载权限 #

在用户首次交互时，提前静音播放一段极短的空白音频，让浏览器记住授权状态。后续后台切回时，可通过静音播放快速恢复权限，再切换回正常音量播放。

关键说明 #

浏览器的自动播放限制是标准安全策略，无法完全绕过。所有方案的核心都是重新获取用户主动交互授权，同时通过状态监听优化体验，避免通知丢失。

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