# Send Webchat Audio Notifications to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- 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.
## Suggested prompts
### New install

```text
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

```text
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.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "webchat-audio-notifications",
    "name": "Webchat Audio Notifications",
    "source": "tencent",
    "type": "skill",
    "category": "通讯协作",
    "sourceUrl": "https://clawhub.ai/brokemac79/webchat-audio-notifications",
    "canonicalUrl": "https://clawhub.ai/brokemac79/webchat-audio-notifications",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/webchat-audio-notifications",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=webchat-audio-notifications",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "BUILD_SUMMARY.md",
      "CLAWDHUB_PUBLISHING.md",
      "DISCORD_ANNOUNCEMENT.md",
      "README.md",
      "SKILL.md",
      "STATUS.md"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "slug": "webchat-audio-notifications",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-01T19:13:42.309Z",
      "expiresAt": "2026-05-08T19:13:42.309Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=webchat-audio-notifications",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=webchat-audio-notifications",
        "contentDisposition": "attachment; filename=\"webchat-audio-notifications-1.2.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "webchat-audio-notifications"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/webchat-audio-notifications"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/webchat-audio-notifications",
    "downloadUrl": "https://openagent3.xyz/downloads/webchat-audio-notifications",
    "agentUrl": "https://openagent3.xyz/skills/webchat-audio-notifications/agent",
    "manifestUrl": "https://openagent3.xyz/skills/webchat-audio-notifications/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/webchat-audio-notifications/agent.md"
  }
}
```
## 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
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: brokemac79
- Version: 1.2.0
## Source health
- Status: healthy
- Item download looks usable.
- Yavira can redirect you to the upstream package for this item.
- Health scope: item
- Reason: direct_download_ok
- Checked at: 2026-05-01T19:13:42.309Z
- Expires at: 2026-05-08T19:13:42.309Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/webchat-audio-notifications)
- [Send to Agent page](https://openagent3.xyz/skills/webchat-audio-notifications/agent)
- [JSON manifest](https://openagent3.xyz/skills/webchat-audio-notifications/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/webchat-audio-notifications/agent.md)
- [Download page](https://openagent3.xyz/downloads/webchat-audio-notifications)