Chrome非活跃标签页返回后批量播放通知声音问题求助

这个问题我之前帮不少开发者排查过，本质是Chrome对非活跃标签页的资源限制导致的——当标签处于后台时，浏览器会挂起很多JS操作，包括Audio.play()请求，等你切回标签页时，这些被挂起的请求会一次性全部执行，就出现了“连播100次”的尴尬情况。给你几个实用的解决思路：

思路一：利用Page Visibility API控制播放时机 #

这是最直接的解决方案，核心是只在标签页活跃时播放提示音，非活跃时记录“有未播放通知”的状态，切回时只播放一次。

// 提前创建音频实例复用，避免重复加载资源
const notificationAudio = new Audio("notif.mp3");
// 标记是否有未处理的通知提示音
window.hasPendingNotification = false;

function handleNewNotification(message) {
  // 先处理toastr通知
  toastr.info(message);
  
  // 控制提示音播放
  if (!document.hidden) {
    // 标签活跃，直接播放
    notificationAudio.currentTime = 0; // 重置播放位置，避免上次未播放完
    notificationAudio.play();
  } else {
    // 标签非活跃，标记待播放
    window.hasPendingNotification = true;
  }
}

// 监听标签页可见性变化
document.addEventListener('visibilitychange', () => {
  // 标签从后台切回前台，且有待播放提示音
  if (!document.hidden && window.hasPendingNotification) {
    notificationAudio.currentTime = 0;
    notificationAudio.play();
    window.hasPendingNotification = false; // 重置标记
  }
});

这样不管错过多少条通知，切回标签页时只会播放一次提示音，完美解决批量播放的问题。

思路二：将提示音与toastr的显示回调绑定 #

既然非活跃标签页不会显示toastr通知，那我们可以把提示音播放和toastr的实际显示动作绑定，只有当toastr成功弹出时才播放声音。

const notificationAudio = new Audio("notif.mp3");

function showNotification(message) {
  toastr.options = {
    onShown: function() {
      // 只有当通知实际显示时，才播放提示音
      notificationAudio.currentTime = 0;
      notificationAudio.play();
    },
    // 其他toastr配置...
  };
  toastr.info(message);
}

这个方案的好处是完全贴合toastr的行为——因为非活跃标签页toastr不会触发onShown回调，所以不会产生挂起的播放请求，自然也就不会出现批量播放的问题。

额外优化建议 #

• 复用Audio实例：不要每次播放都创建新的new Audio()，提前创建一个实例并复用，既能节省资源，也能避免重复加载音频文件。
• 避免重复标记：如果短时间内收到多条通知，不要重复设置hasPendingNotification = true（因为它已经是true了），上面的代码已经天然支持这一点，布尔值只会被设置一次，直到被重置。

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