网页聊天音频提醒

技能简介

为Moltbot/Clawdbot网页聊天添加浏览器音频通知功能。当新消息到达且标签页处于后台时自动播放提示音，避免错过重要信息。

业务背景

解决网页聊天工具后台运行时的消息遗漏问题，通过智能音频提醒确保客服人员及时响应。针对多标签页工作场景，仅在窗口隐藏时触发提示，避免前台干扰；五级响度与自定义音效适配不同办公环境，从开放式工位到嘈杂仓库均可清晰感知。

落地案例：某电商客服团队使用Moltbot接待咨询：客服A同时处理订单系统与聊天页面，当聊天标签处于后台时，新客咨询自动播放定制提示音。主管将重要客户群设为高响度级别，普通咨询设为耳语模式，既保证紧急消息不遗漏，又减少重复切换标签的操作负担。

能做什么

• 智能触发：仅在标签页隐藏时播放，前台不打扰
• 五级响度：从耳语到醒目，按需选择
• 音量调节：0-100%自由设置
• 自定义音效：支持上传MP3/WAV/OGG/WebM格式
• 一键开关：快速启用或禁用通知
• 设置持久化：偏好保存至localStorage
• 移动端适配：有限支持，优雅降级
• 防重复提醒：3秒冷却间隔避免刷屏

使用说明

安装步骤：

1. 复制文件到webchat目录：
   • client/howler.min.js → /webchat/js/
   • client/notification.js → /webchat/js/
   • client/sounds/ → /webchat/sounds/
2. 在webchat HTML的</body>前添加：

   <script src="/js/howler.min.js"></script>
   <script src="/js/notification.js"></script>
   <script>
     const notifier = new WebchatNotifications({
       soundPath: '/sounds/notification'
     });
     notifier.init();
   </script>

3. 接入消息事件：

   socket.on('message', () => {
     if (notifier) notifier.notify();
   });

4. 切换标签页并触发消息测试效果

基础调用：

const notifier = new WebchatNotifications({
  soundPath: './sounds',
  soundName: 'level3',
  defaultVolume: 0.7
});
await notifier.init();
socket.on('message', () => notifier.notify());

输入与输出

见下方输入与输出表格。

风险提示

• 需用户交互后才能启用音频，受浏览器自动播放策略限制
• 首次使用可能弹出权限申请提示
• 移动端功能受限，建议作为辅助手段
• 自定义音效文件过大可能影响加载速度

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/brokemac79/webchat-audio-notifications/SKILL.md
来源类型：GitHub仓库