如何关闭HTML5通知中的声音提示？

本文共计766个文字，预计阅读时间需要4分钟。

HTML5的`Notification` API本身不提供声音播放能力，也没有`sound`、`audio`或类似配置项。你听到的声音，几乎肯定是由页面外部使用的`Audio`对象、`play()`方法或Web Audio API主动触发的——与通知本身无关。

所以“关闭通知声音”，实际是关掉那个被开发者手动绑定在 notification.onclick、notification.onshow 甚至定时器里的 new Audio().play()。

怎么找到并禁用那个偷偷播音的 Audio

常见做法是：页面监听通知显示或点击后，立即播放一段提示音。这段逻辑往往藏在事件回调里，不容易一眼看出。

• 打开浏览器 DevTools → Application 标签页 → 查看 Service Workers 是否注册了后台脚本（有些通知音由 SW 触发）
• 在 Console 中执行 getEventListeners(document) 或搜索 Notification.prototype.onshow 是否被重写
• 全局搜索代码中的 new Audio(、.play()、AudioContext，尤其关注 Notification 创建之后的几行
• 临时屏蔽：在控制台运行 HTMLMediaElement.prototype.play = function() {}; （仅当前页生效，可快速验证是否为音频对象导致）

如果用的是第三方通知库（如 noty、izitoast）

这些库常自带「响铃」开关，但命名五花八门，且默认可能开启：

立即学习“前端免费学习笔记（深入）”；

• noty：检查初始化时是否有 sound: true 或 timeout: false 配合自动播放逻辑
• izitoast：确认没调用 iziToast.show({ sound: '/path/to/sound.mp3' }) —— 这个 sound 字段才是真凶
• snackbar 类组件：留意是否在 onOpen 回调里嵌了 new Audio().play()

别信文档里写的「silent by default」，很多库的 demo 示例里就带着 sound: 'xxx.mp3'，一复制就中招。

浏览器扩展或企业策略强制加音效？

极少数情况，声音不是网页代码发出的，而是：

• Chrome 扩展（比如「通知增强器」「消息提醒大师」）劫持了 Notification 构造函数，注入自己的音频逻辑
• 公司内网统一部署的浏览器策略（通过 ADMX / Intune）启用了系统级通知音效，这类无法被网页 JS 控制
• macOS 系统设置 → 通知 → 对应网站勾选了「播放声音」（注意：这是系统级行为，只影响 Safari，Chrome/Edge 不走这个通道）

真正难排查的，永远是那一行没写注释的 new Audio('/beep.mp3').play() —— 它可能被包在 Promise 里、延迟 300ms 执行、甚至藏在 catch 分支里报错时才响。