Notification sound

README.md

@@ -127,3 +127,9 @@ I welcome any and all contributions. Just create a PR or an issue.
 
 ## License
 Made with ❤️ by [Philipp C. Heckel](https://heckel.io), distributed under the [Apache License 2.0](LICENSE).
+
+Third party libraries and resources:
+* [github.com/urfave/cli/v2](https://github.com/urfave/cli/v2) (MIT) is used to drive the CLI
+* [Mixkit sound](https://mixkit.co/free-sound-effects/notification/) (Mixkit Free License) used as notification sound
+* [Lato Font](https://www.latofonts.com/) (OFL) is used as a font in the Web UI
+* [GoReleaser](https://goreleaser.com/) (MIT) is used to create releases 

server/index.html

@@ -62,6 +62,7 @@
     </form>
     <p id="topicsHeader">Subscribed topics:</p>
     <ul id="topicsList"></ul>
+    <audio id="notifySound" src="static/sound/mixkit-long-pop-2358.wav"></audio>
 
     <h3>Subscribe via your app, or via the CLI</h3>
     <code>

server/static/js/app.js

@@ -14,6 +14,7 @@ let topics = {};
 const topicsHeader = document.getElementById("topicsHeader");
 const topicsList = document.getElementById("topicsList");
 const topicField = document.getElementById("topicField");
+const notifySound = document.getElementById("notifySound");
 const subscribeButton = document.getElementById("subscribeButton");
 const subscribeForm = document.getElementById("subscribeForm");
 const errorField = document.getElementById("error");
@@ -59,6 +60,7 @@ const subscribeInternal = (topic, delaySec) => {
         eventSource.onmessage = (e) => {
             const event = JSON.parse(e.data);
             new Notification(event.message);
+            notifySound.play();
         };
         topics[topic] = eventSource;
         localStorage.setItem('topics', JSON.stringify(Object.keys(topics)));