浏览器非活跃标签页能否播放声音通知？最简实现方法？

可以实现，2024年主流浏览器的自动播放限制下，最可靠且最简的实现方式是利用浏览器原生Notification API，其次是依赖用户初始交互的预加载音频方案。

方案一：使用Notification API（推荐，最可靠） #

浏览器的Notification API专门用于跨标签/后台场景的通知提醒，只要用户授予了通知权限，即使标签页非活跃或浏览器最小化，也能触发带声音的通知，不受自动播放政策限制。

实现步骤： #

1. 请求用户通知权限：必须先获得用户授权才能发送通知。
2. 触发带声音的通知：创建通知实例时指定sound参数指向你的音频文件。

代码示例： #

// 1. 请求通知权限（仅需调用一次，建议在用户首次访问或主动触发时调用）
async function getNotificationPermission() {
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    console.warn('用户未授予通知权限，无法发送声音通知');
  }
}

// 页面加载后可主动请求，或绑定到用户点击事件（比如"开启通知提醒"按钮）
getNotificationPermission();

// 2. 触发带声音的通知
function sendSoundNotification(title, body = '有新消息') {
  // 检查浏览器支持和权限状态
  if (!('Notification' in window)) {
    alert('当前浏览器不支持通知功能');
    return;
  }
  if (Notification.permission !== 'granted') {
    alert('请先开启通知权限');
    return;
  }

  // 创建通知，指定声音文件路径
  new Notification(title, {
    body: body,
    sound: '/assets/notification-sound.mp3' // 替换为你的音频文件路径
    // 可选：添加icon字段设置通知图标
    // icon: '/assets/notification-icon.png'
  });
}

// 使用示例：当收到新买家申请时调用
sendSoundNotification('新买家申请', '有人对你的广告发起了申请，请及时处理');

方案二：预加载音频（备选，依赖用户交互） #

如果用户曾经和页面有过交互（比如点击过页面任意位置），可以提前预加载Audio实例，之后在非活跃标签页尝试播放，这种方式有一定概率生效，但可靠性不如Notification API，不同浏览器可能有差异。

代码示例： #

// 预加载音频：仅在用户首次交互后初始化
let notificationAudio;
document.addEventListener('click', () => {
  if (!notificationAudio) {
    notificationAudio = new Audio('/assets/notification-sound.mp3');
    notificationAudio.load(); // 预加载音频资源
  }
}, { once: true }); // 只执行一次

// 播放通知声音
function playNotificationSound() {
  if (!notificationAudio) {
    console.warn('音频未预加载，请先与页面交互');
    return;
  }
  // 重置播放位置，确保每次触发都能完整播放
  notificationAudio.currentTime = 0;
  // 尝试播放，失败时可降级到Notification API
  notificationAudio.play().catch(err => {
    console.error('音频播放失败:', err);
    sendSoundNotification('新消息');
  });
}

// 使用示例：收到新消息时调用
playNotificationSound();

注意事项 #

• Notification API的sound参数支持的音频格式需符合浏览器兼容要求（一般MP3、WAV都支持）。
• 部分移动浏览器可能需要额外配置才能播放通知声音，建议测试主流浏览器（Chrome、Firefox、Edge等）。
• 预加载音频方案的可靠性依赖用户的初始交互，若用户从未点击过页面，该方案会失效。

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