Add message sound option

2025-06-05 21:59:27 +02:00 · 2023-04-09 22:37:01 +03:00
parent 0f11aab089
commit 915de0b41a
5 changed files with 68 additions and 4 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1084,9 +1084,20 @@
                <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.">
@ -1094,8 +1105,8 @@
                            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>
--- 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>
--- 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;
--- 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();
+    });
 });
--- a/public/sounds/message.mp3
+++ b/public/sounds/message.mp3