fix: TTS lags behind conversation (#494)

* Fix bug: By add some logics to Stage.vue

* fix bug

* Fix bug: Add some logics to Stage.vue

* correct lint

* fix bug and correct lint

* add logic to Stage.vue

* correct lint

* correct lint (final)

* Update packages/stage-ui/src/components/Scenes/Stage.vue

Co-authored-by: Makito <sumimakito@hotmail.com>

* Update packages/stage-ui/src/components/Scenes/Stage.vue

Co-authored-by: Makito <sumimakito@hotmail.com>

---------

Co-authored-by: Makito <sumimakito@hotmail.com>

packages/stage-ui/src/components/Scenes/Stage.vue

@@ -74,11 +74,21 @@ vrmStore.onShouldUpdateView(async () => {
 const audioAnalyser = ref<AnalyserNode>()
 const nowSpeaking = ref(false)
 const lipSyncStarted = ref(false)
+let currentAudioSource: AudioBufferSourceNode | null = null
 
 const audioQueue = useQueue<{ audioBuffer: AudioBuffer, text: string }>({
   handlers: [
     (ctx) => {
       return new Promise((resolve) => {
+        // Stop any currently playing audio
+        if (currentAudioSource) {
+          try {
+            currentAudioSource.stop()
+            currentAudioSource.disconnect()
+          }
+          catch {}
+          currentAudioSource = null
+        }
         // Create an AudioBufferSourceNode
         const source = audioContext.createBufferSource()
         source.buffer = ctx.data.audioBuffer
@@ -90,9 +100,13 @@ const audioQueue = useQueue<{ audioBuffer: AudioBuffer, text: string }>({
 
         // Start playing the audio
         nowSpeaking.value = true
+        currentAudioSource = source
         source.start(0)
         source.onended = () => {
           nowSpeaking.value = false
+          if (currentAudioSource === source) {
+            currentAudioSource = null
+          }
           resolve()
         }
       })
@@ -209,6 +223,16 @@ function setupAnalyser() {
 }
 
 onBeforeMessageComposed(async () => {
+  // Stop any currently playing audio and clear the audio queue
+  if (currentAudioSource) {
+    try {
+      currentAudioSource.stop()
+      currentAudioSource.disconnect()
+    }
+    catch {}
+    currentAudioSource = null
+  }
+  audioQueue.queue.value = []
   setupAnalyser()
   setupLipSync()
 })