[feat] stop tts

src/lang/en.ts

@@ -264,5 +264,6 @@ export const languageEnglish = {
     textBorder: "Text Outlines",
     textScreenRound: "Round Text Screen",
     textScreenBorder: "Text Screen Borders",
-    ttsReadOnlyQuoted: "Read Only Quoted"
+    ttsReadOnlyQuoted: "Read Only Quoted",
+    ttsStop: "Stop TTS"
 }

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { DatabaseIcon, DicesIcon, LanguagesIcon, MenuIcon, RefreshCcwIcon, Send } from "lucide-svelte";
+    import { DatabaseIcon, DicesIcon, LanguagesIcon, MenuIcon, MicOffIcon, RefreshCcwIcon, Send } from "lucide-svelte";
     import { selectedCharID } from "../../ts/stores";
     import Chat from "./Chat.svelte";
     import { DataBase, appVer, type Message } from "../../ts/database";
@@ -14,6 +14,7 @@
     import { processScript } from "src/ts/process/scripts";
     import GithubStars from "../Others/GithubStars.svelte";
     import CreatorQuote from "./CreatorQuote.svelte";
+  import { stopTTS } from "src/ts/process/tts";
 
     let messageInput = ''
     let openMenu = false
@@ -333,6 +334,17 @@
                         </div>
                     {/if}
 
+                    
+                    <!-- svelte-ignore empty-block -->
+                    {#if $DataBase.characters[$selectedCharID].ttsMode === 'webspeech' || $DataBase.characters[$selectedCharID].ttsMode === 'elevenlab'}
+                        <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={() => {
+                            stopTTS()
+                        }}>
+                            <MicOffIcon />
+                            <span class="ml-2">{language.ttsStop}</span>
+                        </div>
+                    {/if}
+
                     <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={() => {
                         openChatList = true
                         openMenu = false

src/ts/database.ts

@@ -316,6 +316,7 @@ export interface groupChat{
     firstMsgIndex?:number,
     loreSettings?:loreSettings
     supaMemory?:boolean
+    ttsMode?:string
 }
 
 export interface botPreset{

src/ts/process/tts.ts

@@ -2,6 +2,8 @@ import { get } from "svelte/store";
 import { alertError } from "../alert";
 import { DataBase, type character } from "../database";
 
+let sourceNode:AudioBufferSourceNode = null
+
 export async function sayTTS(character:character,text:string) {
 
     let db = get(DataBase)
@@ -47,7 +49,7 @@ export async function sayTTS(character:character,text:string) {
             })
             if(da.status >= 200 && da.status < 300){
                 const audioBuffer = await audioContext.decodeAudioData(await da.arrayBuffer())
-                const sourceNode = audioContext.createBufferSource();
+                sourceNode = audioContext.createBufferSource();
                 sourceNode.buffer = audioBuffer;
                 sourceNode.connect(audioContext.destination);            
                 sourceNode.start();
@@ -60,6 +62,15 @@ export async function sayTTS(character:character,text:string) {
 
 }
 
+export function stopTTS(){
+    if(sourceNode){
+        sourceNode.stop()
+    }
+    if(speechSynthesis && SpeechSynthesisUtterance){
+        speechSynthesis.cancel()
+    }
+}
+
 
 export function getWebSpeechTTSVoices() {
     return speechSynthesis.getVoices().map(v => {