Webchat Audio Notifications_设计多媒体 skill-PHP中文网

Webchat Audio Notifications

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

为Moltbot/Clawdbot网页聊天添加音频通知，提供5档强度（从轻声到无法忽略），仅在标签页后台时生效。

QQ Webchat 音频通知

功能概述

QQ Webchat 音频通知是一项面向实际任务的技能，主要用于为 Moltbot/ Clawdbot 网络聊天浏览音频通知；当新信件到达时, 播放一个通知声音, 但只有在标签在背景中时才使用；

核心要点

Feature。
它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。

使用与执行

该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；

结果检查与注意事项

若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。

🔔 Webchat 音频通知

Moltbot/Clawdbot Webchat 的浏览器音频通知功能。当新消息到达时播放提示音——但仅在当前标签页处于后台时触发。

特性

🔔 智能通知 —— 仅在标签页被隐藏时播放
🎚️ 音量控制 —— 可调节范围：0–100%
🎵 5 级强度档位 —— 从“耳语级”（1）到“绝对无法忽略”（5）
📁 自定义音效 —— 支持上传 MP3、WAV、OGG、WebM 格式音频文件
🔕 一键开关 —— 单击启用或禁用通知
💾 持久化设置 —— 配置项保存于 localStorage 中
📱 移动设备友好 —— 在移动端优雅降级
🚫 自动播放处理 —— 遵循浏览器自动播放策略
⏱️ 冷却时间 —— 防止通知刷屏（两次提醒间隔至少 3 秒）
🐞 调试模式 —— 可选控制台日志输出

快速开始

测试概念验证（POC）

cd examples
python3 -m http.server 8080
# 打开 http://localhost:8080/test.html

测试步骤：

切换至其他标签页
点击“Trigger Notification”按钮
听到提示音！🔊

基础集成

// 初始化
const notifier = new WebchatNotifications({
  soundPath: './sounds',
  soundName: 'level3',  // 中等强度（默认）
  defaultVolume: 0.7
});

await notifier.init();

// 新消息到达时触发通知
socket.on('message', () => notifier.notify());

// 不同事件使用不同强度
socket.on('mention', () => {
  notifier.setSound('level5');  // 提及（@mention）使用最高强度
  notifier.notify();
});

API

构造函数参数

new WebchatNotifications({
  soundPath: './sounds',               // 音效目录路径
  soundName: 'level3',                 // 强度等级：level1（耳语）至 level5（极响）
  defaultVolume: 0.7,                  // 音量：0.0 至 1.0
  cooldownMs: 3000,                    // 两次提醒之间的最小间隔（毫秒）
  enableButton: true,                  // 是否显示启用提示按钮
  debug: false                         // 是否启用控制台日志
});

强度等级说明：

level1 —— 耳语级（9.5KB），最细微
level2 —— 轻柔级（12KB），温和
level3 —— 中等级（13KB），默认值
level4 —— 响亮级（43KB），引人注意
level5 —— 极响级（63KB），绝对无法忽略

方法

init() —— 初始化（需在 Howler 加载完成后调用）
notify(eventType?) —— 触发通知（仅当标签页处于隐藏状态时生效）
test() —— 立即播放音效（忽略标签页可见性状态）
setEnabled(bool) —— 启用或禁用通知
setVolume(0–1) —— 设置音量（0.0 至 1.0）
setSound(level) —— 切换强度等级（'level1' 至 'level5'）
getSettings() —— 获取当前全部配置项

浏览器兼容性

浏览器	版本	支持情况
Chrome	92+	✅ 完全支持
Firefox	90+	✅ 完全支持
Safari	15+	✅ 完全支持
移动设备	最新版	⚠️ 功能受限

总体覆盖： 92% 的用户（支持 Web Audio API）

文件结构

webchat-audio-notifications/
├── client/
│   ├── notification.js       # 主类（10KB）
│   ├── howler.min.js         # 音频库（36KB）
│   └── sounds/
│       ├── level1.mp3        # 耳语级（9.5KB）
│       ├── level2.mp3        # 轻柔级（12KB）
│       ├── level3.mp3        # 中等级（13KB，默认）
│       ├── level4.mp3        # 响亮级（43KB）
│       └── level5.mp3        # 极响级（63KB）
├── examples/
│   └── test.html            # 包含全部强度档位的独立测试页面
├── docs/
│   └── integration.md       # 集成指南
└── README.md                # 完整文档

集成指南

详见 docs/integration.md，涵盖以下内容：

分步安装流程
Moltbot 特定钩子（hooks）
React/Vue 示例代码
常见使用模式（如 @mentions、免打扰 DND、徽章提示等）
测试检查清单

配置示例

简易配置

const notifier = new WebchatNotifications();
await notifier.init();
notifier.notify();

高级配置

const notifier = new WebchatNotifications({
  soundPath: '/assets/sounds',
  soundName: 'level2',  // 默认使用轻柔级
  defaultVolume: 0.8,
  cooldownMs: 5000,
  debug: true
});

await notifier.init();

// 普通消息 = 轻柔级
socket.on('message', () => {
  notifier.setSound('level2');
  notifier.notify();
});

// 提及（@mention）= 极响级
socket.on('mention', () => {
  notifier.setSound('level5');
  notifier.notify();
});

// 私信（DM）= 响亮级
socket.on('dm', () => {
  notifier.setSound('level4');
  notifier.notify();
});