From 0c8119cdc1baaebae039b8e6d8bf254524b20de8 Mon Sep 17 00:00:00 2001
From: Hk-Gosuto <yominogosuto@gmail.com>
Date: Mon, 11 Mar 2024 12:49:34 +0800
Subject: [PATCH] fix: #222

---
 app/components/chat.tsx |  1 +
 app/utils/audio.ts      | 20 ++++++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 20e8bc3e3..469b74da2 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -990,6 +990,7 @@ function _Chat() {
       api = new ClientApi(ModelProvider.GPT);
       const config = useAppConfig.getState();
       setSpeechLoading(true);
+      ttsPlayer.init();
       const audioBuffer = await api.llm.speech({
         model: config.ttsConfig.model,
         input: text,
diff --git a/app/utils/audio.ts b/app/utils/audio.ts
index 953f789c1..f6828c7aa 100644
--- a/app/utils/audio.ts
+++ b/app/utils/audio.ts
@@ -1,4 +1,5 @@
 type TTSPlayer = {
+  init: () => void;
   play: (audioBuffer: ArrayBuffer, onended: () => void | null) => Promise<void>;
   stop: () => void;
 };
@@ -7,17 +8,24 @@ export function createTTSPlayer(): TTSPlayer {
   let audioContext: AudioContext | null = null;
   let audioBufferSourceNode: AudioBufferSourceNode | null = null;
 
+  const init = () => {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    audioContext.suspend();
+  };
+
   const play = async (audioBuffer: ArrayBuffer, onended: () => void | null) => {
     if (audioBufferSourceNode) {
       audioBufferSourceNode.stop();
       audioBufferSourceNode.disconnect();
     }
-    audioContext = new AudioContext();
-    const buffer = await audioContext.decodeAudioData(audioBuffer);
-    audioBufferSourceNode = audioContext.createBufferSource();
+
+    const buffer = await audioContext!.decodeAudioData(audioBuffer);
+    audioBufferSourceNode = audioContext!.createBufferSource();
     audioBufferSourceNode.buffer = buffer;
-    audioBufferSourceNode.connect(audioContext.destination);
-    audioBufferSourceNode.start();
+    audioBufferSourceNode.connect(audioContext!.destination);
+    audioContext!.resume().then(() => {
+      audioBufferSourceNode!.start();
+    });
     audioBufferSourceNode.onended = onended;
   };
 
@@ -33,5 +41,5 @@ export function createTTSPlayer(): TTSPlayer {
     }
   };
 
-  return { play, stop };
+  return { init, play, stop };
 }