fix: #222

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,

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 };
 }