Create Chat Ding Widget

ChatDing/README.md

@@ -0,0 +1,10 @@
+# Chat Ding
+This widget plays a sound when a chat message is recieved in Twitch or Youtube chat (youtube untested).  Useful for streamers with few viewers that forget to check chat regularly.  There is no HTML or CSS.  This is audio only.  Feel free to edit the first JS variable to add more events to ding for.  The code is sound, but the functionality and integration could easily be improved upon.  I scraped this together and modified it from reddit.
+
+Config options:
+* Audio File URL (must end in .mp3).  There is a default entry from freesound.org
+* Ding Volume
+* Cooldown in seconds before new dings can be triggered
+
+## IMPORTANT:
+Do NOT use this in the "normal" StreamElements source way.  Your chat does not want to hear a ding on stream for every message.  When you add this to OBS as a browser source, check "Control Audio with OBS".  This will add an extra audio channel.  Configure this channel to "Monitor Only".  Of course, you also can't stream the all "Desktop Audio" channel using this method.

ChatDing/widget.js

@@ -0,0 +1,29 @@
+// twitch and youtube message events
+var eventList = ["message", "youtube#liveChatMessage"];
+var cooling = null;
+
+var audio, coolDown;
+// on widget load, apply settings variables and load sound file
+window.addEventListener('onWidgetLoad', (obj) => {
+    const {fieldData} = obj.detail;
+    audio = new Audio(fieldData.dingSound);
+    audio.volume = fieldData.dingVolume / 100;
+    audio.autoplay = false;
+    coolDown = fieldData.coolDown;
+})
+// on message recieved, stop any existing ding, play ding, and apply cooldown
+// message events are ignored entirely while on cooldown
+window.addEventListener('onEventReceived', (obj) => {
+    if (cooling === null) {
+        if (eventList.includes(obj.detail.listener))
+        {
+            if (!audio.paused)
+            {
+                audio.pause();
+                audio.currentTime = 0;
+            }
+            audio.play();
+            cooling = setTimeout(() => {cooling = null;}, coolDown * 1000)
+        }
+    }
+});

ChatDing/widget.json

@@ -0,0 +1,31 @@
+{
+  "widgetName": {
+    "type": "hidden",
+    "value": "Chat Message Dings"
+  },
+  "widgetAuthor": {
+    "type": "hidden",
+    "value": "Freedbot"
+  },
+  "dingSound": {
+    "type": "text",
+    "label": "Audio File URL (must end in .mp3)",
+    "value": "https://freesound.org/data/previews/235/235911_2391840-lq.mp3"
+  },
+  "dingVolume": {
+    "type": "slider",
+    "label": "Ding Volume",
+    "value": 70,
+    "min": 0,
+    "max": 100,
+    "step": 1
+  },
+  "coolDown": {
+    "type": "number",
+    "label": "Cooldown in seconds before new dings can be triggered",
+    "value": 5,
+    "min": 1,
+    "max": 10000,
+    "step": 1
+  }
+}