Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Communication & Collaboration
Webchat Audio Notifications
Add browser audio notifications to Moltbot/Clawdbot webchat with 5 intensity levels - from whisper to impossible-to-miss (only when tab is backgrounded).
skill openclawclawhub Free
Add browser audio notifications to Moltbot/Clawdbot webchat with 5 intensity levels - from whisper to impossible-to-miss (only when tab is backgrounded).
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- BUILD_SUMMARY.md, CLAWDHUB_PUBLISHING.md, DISCORD_ANNOUNCEMENT.md, README.md, SKILL.md, STATUS.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.2.0
Provenance
- Publisher
- brokemac79
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
๐ Webchat Audio Notifications
Browser audio notifications for Moltbot/Clawdbot webchat. Plays a notification sound when new messages arrive - but only when the tab is in the background.
Features
๐ Smart notifications - Only plays when tab is hidden ๐๏ธ Volume control - Adjustable 0-100% ๐ต 5 intensity levels - Whisper (1) to impossible-to-miss (5) ๐ Custom sounds - Upload your own (MP3, WAV, OGG, WebM) ๐ Easy toggle - Enable/disable with one click ๐พ Persistent settings - Preferences saved in localStorage ๐ฑ Mobile-friendly - Graceful degradation on mobile ๐ซ Autoplay handling - Respects browser policies โฑ๏ธ Cooldown - Prevents spam (3s between alerts) ๐ Debug mode - Optional logging
Test the POC
cd examples python3 -m http.server 8080 # Open http://localhost:8080/test.html Test steps: Switch to another tab Click "Trigger Notification" Hear the sound! ๐
Basic Integration
// Initialize const notifier = new WebchatNotifications({ soundPath: './sounds', soundName: 'level3', // Medium intensity (default) defaultVolume: 0.7 }); await notifier.init(); // Trigger on new message socket.on('message', () => notifier.notify()); // Use different levels for different events socket.on('mention', () => { notifier.setSound('level5'); // Loudest for mentions notifier.notify(); });
Constructor Options
new WebchatNotifications({ soundPath: './sounds', // Path to sounds directory soundName: 'level3', // level1 (whisper) to level5 (very loud) defaultVolume: 0.7, // 0.0 to 1.0 cooldownMs: 3000, // Min time between alerts enableButton: true, // Show enable prompt debug: false // Console logging }); Intensity Levels: level1 - Whisper (9.5KB) - Most subtle level2 - Soft (12KB) - Gentle level3 - Medium (13KB) - Default level4 - Loud (43KB) - Attention-getting level5 - Very Loud (63KB) - Impossible to miss
Methods
init() - Initialize (call after Howler loads) notify(eventType?) - Trigger notification (only if tab hidden) test() - Play sound immediately (ignore tab state) setEnabled(bool) - Enable/disable notifications setVolume(0-1) - Set volume setSound(level) - Change intensity ('level1' through 'level5') getSettings() - Get current settings
Browser Compatibility
BrowserVersionSupportChrome92+โ FullFirefox90+โ FullSafari15+โ FullMobileLatestโ ๏ธ Limited Overall: 92% of users (Web Audio API support)
File Structure
webchat-audio-notifications/ โโโ client/ โ โโโ notification.js # Main class (10KB) โ โโโ howler.min.js # Audio library (36KB) โ โโโ sounds/ โ โโโ level1.mp3 # Whisper (9.5KB) โ โโโ level2.mp3 # Soft (12KB) โ โโโ level3.mp3 # Medium (13KB, default) โ โโโ level4.mp3 # Loud (43KB) โ โโโ level5.mp3 # Very Loud (63KB) โโโ examples/ โ โโโ test.html # Standalone test with all levels โโโ docs/ โ โโโ integration.md # Integration guide โโโ README.md # Full documentation
Integration Guide
See docs/integration.md for: Step-by-step setup Moltbot-specific hooks React/Vue examples Common patterns (@mentions, DND, badges) Testing checklist
Simple
const notifier = new WebchatNotifications(); await notifier.init(); notifier.notify();
Advanced
const notifier = new WebchatNotifications({ soundPath: '/assets/sounds', soundName: 'level2', // Start with soft defaultVolume: 0.8, cooldownMs: 5000, debug: true }); await notifier.init(); // Regular messages = soft socket.on('message', () => { notifier.setSound('level2'); notifier.notify(); }); // Mentions = very loud socket.on('mention', () => { notifier.setSound('level5'); notifier.notify(); }); // DMs = loud socket.on('dm', () => { notifier.setSound('level4'); notifier.notify(); });
With UI Controls
<input type="range" min="0" max="100" onchange="notifier.setVolume(this.value / 100)"> <button onclick="notifier.test()">Test ๐</button>
Troubleshooting
No sound? Click page first (autoplay restriction) Check tab is actually hidden Verify volume > 0 Check console for errors Sound plays when tab active? Enable debug mode Check for "Tab is visible, skipping" message Report as bug if missing Mobile not working? iOS requires user gesture per play Consider visual fallback (flashing favicon)
Performance
Bundle: ~122KB total (minified) Memory: ~2MB during playback CPU: Negligible (browser-native) Network: One-time download, cached
Security
โ No external requests โ localStorage only โ No tracking โ No special permissions
License
MIT License
Credits
Audio library: Howler.js (MIT) Sounds: Mixkit.co (Royalty-free) Author: @brokemac79 For: Moltbot/Clawdbot community
Contributing
Test with examples/test.html Enable debug mode Report issues with browser + console output
Roadmap
WebM format (smaller files) Per-event sounds (mention, DM, etc.) Visual fallback (favicon flash) System notifications API Settings UI component Do Not Disturb mode Status: โ v1.1.0 Complete - 5 Intensity Levels Tested: Chrome, Firefox, Safari Ready for: Production use & ClawdHub publishing
Links
๐ README - Full documentation ๐ง Integration Guide - Setup instructions ๐งช Test Page - Try it yourself ๐ฌ Discord Thread - Community discussion
Category context
Messaging, meetings, inboxes, CRM, and teammate communication surfaces.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
6 Docs
- SKILL.md
- BUILD_SUMMARY.md
- CLAWDHUB_PUBLISHING.md
- DISCORD_ANNOUNCEMENT.md
- README.md
- STATUS.md