From f12040830d45a58ce09e93fe64599a4b75bccc3b Mon Sep 17 00:00:00 2001
From: kwaroran <kwaworan@gmail.com>
Date: Sun, 21 May 2023 02:58:03 +0900
Subject: [PATCH] [feat] stop tts

---
 src/lang/en.ts                               |  3 ++-
 src/lib/ChatScreens/DefaultChatScreen.svelte | 14 +++++++++++++-
 src/ts/database.ts                           |  1 +
 src/ts/process/tts.ts                        | 13 ++++++++++++-
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/lang/en.ts b/src/lang/en.ts
index cf3a5d79..7b7f0987 100644
--- a/src/lang/en.ts
+++ b/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"
 }
diff --git a/src/lib/ChatScreens/DefaultChatScreen.svelte b/src/lib/ChatScreens/DefaultChatScreen.svelte
index 5fe19382..5abb26e9 100644
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/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
diff --git a/src/ts/database.ts b/src/ts/database.ts
index 1936ae19..abbcb5d7 100644
--- a/src/ts/database.ts
+++ b/src/ts/database.ts
@@ -316,6 +316,7 @@ export interface groupChat{
     firstMsgIndex?:number,
     loreSettings?:loreSettings
     supaMemory?:boolean
+    ttsMode?:string
 }
 
 export interface botPreset{
diff --git a/src/ts/process/tts.ts b/src/ts/process/tts.ts
index 6071156c..9cfe1d01 100644
--- a/src/ts/process/tts.ts
+++ b/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 => {