Add browser audio notifications to Moltbot/Clawdbot webchat with 5 intensity levels - from whisper to impossible-to-miss (only when tab is backgrounded).
Browser audio notifications for Moltbot/Clawdbot webchat. Plays a notification sound when new messages arrive - but only when the tab is in the background.
cd examples
python3 -m http.server 8080
# Open http://localhost:8080/test.html
Test steps:
// 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();
});
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 subtlelevel2 - Soft (12KB) - Gentlelevel3 - Medium (13KB) - Defaultlevel4 - Loud (43KB) - Attention-gettinglevel5 - Very Loud (63KB) - Impossible to missinit() - Initialize (call after Howler loads)notify(eventType?) - Trigger notification (only if tab hidden)test() - Play sound immediately (ignore tab state)setEnabled(bool) - Enable/disable notificationssetVolume(0-1) - Set volumesetSound(level) - Change intensity ('level1' through 'level5')getSettings() - Get current settings| Browser | Version | Support |
|---|---|---|
| Chrome | 92+ | ✅ Full |
| Firefox | 90+ | ✅ Full |
| Safari | 15+ | ✅ Full |
| Mobile | Latest | ⚠️ Limited |
Overall: 92% of users (Web Audio API support)
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
See docs/integration.md for:
const notifier = new WebchatNotifications();
await notifier.init();
notifier.notify();
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();
});
<input type="range" min="0" max="100"
onchange="notifier.setVolume(this.value / 100)">
<button onclick="notifier.test()">Test 🔊</button>
No sound?
Sound plays when tab active?
Mobile not working?
MIT License
examples/test.htmlStatus: ✅ v1.1.0 Complete - 5 Intensity Levels
Tested: Chrome, Firefox, Safari
Ready for: Production use & ClawdHub publishing