后台消息即时提醒，五档强度随心调

为 Moltbot/Clawdbot 网页聊天添加浏览器音频通知，支持 5 级强度调节，仅在后台标签页触发，提升消息响应效率。

基本信息

• 技能名称?Webchat Audio Notifications
• 中文名称?后台消息即时提醒，五档强度随心调
• 作者?brokemac79
• 分类?专业技能
• 版本?1.2.0
• 标签?webchat, notifications, audio, browser-extension, ux, moltbot, clawdbot, howler-js

使用方法

使用说明
核心用法
Webchat Audio Notifications 是一款面向 Moltbot/Clawdbot 生态的浏览器音频通知增强工具。其核心功能是在用户切换到其他标签页时，通过播放预设音频提醒新消息到达，解决后台 tab 消息遗漏的痛点。
主要技术实现：
基于 Howler.js 音频库封装，提供统一的 Web Audio API 调用
WebchatNotifications 类提供完整生命周期管理：初始化、音量控制、强度切换、冷却防抖
通过 document.visibilityState 检测标签页可见性，确保仅后台触发
localStorage 持久化用户偏好设置
显著优点：

1. 五级强度梯度设计 — 从 9.5KB 的「耳语」到 63KB 的「不可忽略」，适配不同办公场景（开放式工位 vs 独立办公室）
2. 智能防抖机制 — 默认 3 秒冷却期避免消息轰炸时的听觉疲劳
3. 零依赖部署 — 内置 Howler.min.js（36KB），无需 npm 或 CDN
4. 移动端降级友好 — iOS 自动回退至视觉提示（文档提及 favicon flash 规划）
5. 事件分级支持 — API 支持 setSound() 动态切换，可实现「普通消息轻响/@提及巨响」的差异化策略
   潜在缺点与局限性：
   浏览器 autoplay 限制 — 首次使用需用户点击页面激活音频上下文（所有现代浏览器的安全策略，非本工具独有）
   移动端功能受限 — iOS Safari 要求每次播放必须有用户手势，无法真正做到「后台自动响铃」
   无内置 UI 组件 — 音量滑块、开关按钮需自行实现（roadmap 中有规划）
   生态绑定 — 虽然理论上通用，但文档、示例、社区支持均围绕 Moltbot/Clawdbot 展开
   适合人群：
   需要长时间后台驻留 webchat 的客服、社区运营、开发协作团队
   对消息响应时效敏感，但不愿被弹窗干扰工作流程的用户
   已有 Moltbot/Clawdbot 部署，希望低成本增强 UX 的技术团队
   常规风险：
   音频文件（尤其 level4/5）体积较大（43-63KB），弱网环境可能延迟加载
   若未正确配置 cooldownMs ，高频消息场景可能触发浏览器「静音此标签页」提示
   多标签页同时打开同一 webchat 时，可能产生重复通知（需服务端配合去重）