HTML5 Notification API 本身不支持声音，需配合 Audio API 实现；所有提示音均由开发者手动调用 new Audio() 或 AudioContext 播放，常绑定于 WebSocket 收消息、onshow 事件或页面失焦时；应解耦音频逻辑、提供开关、处理播放失败降级。
HTML5 的 Notification API 本身不提供声音功能，所谓“新消息声音提醒”必须由网页额外实现——Notification 负责弹窗，Audio 负责发声。两者配合才能达成类似微信的完整提醒效果。
为什么 Notification 自带不了声音
Notification 构造函数（new Notification()）没有任何 sound、audio 或音效相关参数。所有你听到的提示音，都是开发者手动用 new Audio() 或 AudioContext 播放的，通常绑定在以下时机：
- 收到 WebSocket 消息后立即播放
- Notification 显示完成时（监听
onshow事件） - 用户点击通知后（
onclick回调中） - 页面失焦时检测到新消息，同时触发弹窗+播音
添加声音提醒的实用做法
推荐在收到新消息、且满足条件时同步触发音频播放。注意避免重复播放和权限干扰：
- 使用
const audio = new Audio('/sounds/beep.mp3')加载提示音，路径需为 HTTPS 或同源资源 - 在 WebSocket
onmessage回调里调用audio.play().catch(e => console.warn('Audio play blocked:', e))，因为现代浏览器要求用户交互后才允许自动播放音频 - 若页面处于聚焦状态，可只播音不发通知；若失焦，再补发 Notification —— 这样更尊重用户当前上下文
- 对同一会话的连续消息做防抖，比如 2 秒内只响一次，避免声音刷屏
兼容性与静音控制
用户可能希望关闭声音但保留弹窗，或反之。建议提供独立开关：
立即学习“前端免费学习笔记（深入）”；
- 在设置区域加一个「消息提示音」复选框，勾选时启用
audio.play()，取消时跳过 - 不要把音频逻辑硬编码在 Notification 创建之后；应解耦成独立函数，如
playMessageSound() - 若用第三方库（如 Howler.js），确认其
mute: true或volume: 0配置生效位置 - 企业环境或 macOS 系统级通知音效无法被 JS 控制，需提醒用户检查系统设置 → 通知 → 对应网站是否启用了「播放声音」
降级方案要真实可用
当 audio.play() 被浏览器阻止（常见于无用户交互的后台消息），不能让提醒失效：
- 捕获
play()的 Promise rejection，失败后改用视觉强化：闪烁标题栏、高亮消息气泡、播放 CSS 动画 - 在桌面通知的
body中加入文字提示，例如「【有新消息】点击查看」 - 对 Safari 用户（不支持 Notification API），直接走页面内 Toast + 标题闪烁 + 音频 fallback（如有用户交互）
