Add message sound option

Hellvis85 · Apr 9, 2023 · 915de0b · 915de0b
1 parent 0f11aab
commit 915de0b
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 4 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1084,18 +1084,29 @@ <h4>Chat Width (PC)</h4>
                 <div id="power-user-options-block">
                     <h3>Power User Options</h3>
                     <div id="power-user-option-checkboxes">
+                        <label for="swipes-checkbox">
+                            <input id="swipes-checkbox" type="checkbox" />
+                            Swipes
+                        </label>
 
-                        <label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
-                            Auto-load Last Chat
+                        <label for="play_message_sound" class="checkbox_label">
+                            <input id="play_message_sound" type="checkbox" />
+                            <audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
+                            <span>
+                                Play a sound on new message 
+                                <a href="/notes/message_sound" class="notes-link" target="_blank">
+                                    <span class="note-link-span">?</span>
+                                </a>
+                            </span>
                         </label>
 
                         <label for="fast_ui_mode" class="checkbox_label" title="Blur can cause browser lag, especially in Bubble Chat mode. To fix: Turn on your browser's Hardware Acceleration, and restart your browser or simply disable the blur effect with this toggle.">
                             <input id="fast_ui_mode" type="checkbox" />
                             No Blur Effect
                         </label>
 
-                        <label for="swipes-checkbox"><input id="swipes-checkbox" type="checkbox" />
-                            Swipes
+                        <label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
+                            Auto-load Last Chat
                         </label>
                     </div>
                 </div>

diff --git a/public/notes/message_sound.html b/public/notes/message_sound.html
@@ -0,0 +1,30 @@
+<html>
+
+<head>
+    <title>Message Sound</title>
+    <link rel="stylesheet" href="/css/notes.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+    <div id="main">
+        <div id="content">
+            <h2>Message Sound</h2>
+            <p>To play your own custom sound on receiving a new message from bot, replace the following MP3 file in your TavernAI folder:</p>
+            <code>
+                public/sounds/message.mp3
+            </code>
+            <small>
+                Plays at 80% volume.
+            </small>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/public/script.js b/public/script.js
@@ -41,6 +41,7 @@ import {
 import {
     collapseNewlines,
     loadPowerUserSettings,
+    playMessageSound,
     power_user,
 } from "./scripts/power-user.js";
 
@@ -1796,6 +1797,7 @@ async function Generate(type, automatic_trigger, force_name2) {
                     //getMessage = getMessage.replace(/^\s+/g, '');
                     if (getMessage.length > 0) {
                         ({ type, getMessage } = saveReply(type, getMessage, this_mes_is_name));
+                        playMessageSound();
                         generate_loop_counter = 0;
                     } else {
                         ++generate_loop_counter;

diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
@@ -3,6 +3,7 @@ import { saveSettingsDebounced } from "../script.js";
 export {
     loadPowerUserSettings,
     collapseNewlines,
+    playMessageSound,
     power_user,
 };
 
@@ -35,6 +36,7 @@ let power_user = {
     avatar_style: avatar_styles.ROUND,
     chat_display: chat_styles.DEFAULT,
     sheld_width: sheld_width.DEFAULT,
+    play_message_sound: false,
 };
 
 const storage_keys = {
@@ -53,6 +55,18 @@ const storage_keys = {
     sheld_width: "TavernAI_sheld_width"
 };
 
+function playMessageSound() {
+    if (!power_user.play_message_sound) {
+        return;
+    }
+
+    const audio = document.getElementById('audio_message_sound');
+    audio.volume = 0.8;
+    audio.pause();
+    audio.currentTime = 0;
+    audio.play();
+}
+
 function collapseNewlines(x) {
     return x.replaceAll(/\n+/g, "\n");
 }
@@ -129,6 +143,7 @@ function loadPowerUserSettings(settings) {
     $("#custom_chat_separator").val(power_user.custom_chat_separator);
     $("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
     $("#multigen").prop("checked", power_user.multigen);
+    $("#play_message_sound").prop("checked", power_user.play_message_sound);
     $(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
     $(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
     $(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
@@ -199,10 +214,16 @@ $(document).ready(() => {
         localStorage.setItem(storage_keys.chat_display, power_user.chat_display);
         applyChatDisplay();
     });
+
     $(`input[name="sheld_width"]`).on('input', function (e) {
         power_user.sheld_width = Number(e.target.value);
         localStorage.setItem(storage_keys.sheld_width, power_user.sheld_width);
         console.log("sheld width changing now");
         applySheldWidth();
     });
+
+    $("#play_message_sound").on('input', function () {
+        power_user.play_message_sound = !!$(this).prop('checked');
+        saveSettingsDebounced();
+    });
 });
diff --git a/public/sounds/message.mp3 b/public/sounds/message.mp3