話終わったあとに表情をneutralに戻す

src/features/messages/speakCharacter.ts

@@ -11,17 +11,19 @@ import { synthesizeVoiceVoicevoxApi } from './synthesizeVoiceVoicevox'
 import { synthesizeVoiceGSVIApi } from './synthesizeVoiceGSVI'
 import toastStore from '@/features/stores/toast'
 import i18next from 'i18next'
+import { SpeakQueue } from './speakQueue'
 
 interface EnglishToJapanese {
   [key: string]: string
 }
 
 const typedEnglishToJapanese = englishToJapanese as EnglishToJapanese
 
+const speakQueue = new SpeakQueue()
+
 const createSpeakCharacter = () => {
   let lastTime = 0
   let prevFetchPromise: Promise<unknown> = Promise.resolve()
-  let prevSpeakPromise: Promise<unknown> = Promise.resolve()
 
   return (
     screenplay: Screenplay,
@@ -32,7 +34,6 @@ const createSpeakCharacter = () => {
     onStart?.()
 
     if (ss.changeEnglishToJapanese && ss.selectLanguage === 'ja') {
-      // 英単語を日本語で読み上げる
       screenplay.talk.message = convertEnglishToJapaneseReading(
         screenplay.talk.message
       )
@@ -106,17 +107,17 @@ const createSpeakCharacter = () => {
     })
 
     prevFetchPromise = fetchPromise
-    prevSpeakPromise = Promise.all([fetchPromise, prevSpeakPromise]).then(
-      ([audioBuffer]) => {
-        if (!audioBuffer) {
-          return
-        }
-        const hs = homeStore.getState()
-        return hs.viewer.model?.speak(audioBuffer, screenplay, isNeedDecode)
-      }
-    )
-    prevSpeakPromise.then(() => {
-      onComplete?.()
+
+    // キューを使用した処理に変更
+    fetchPromise.then((audioBuffer) => {
+      if (!audioBuffer) return
+
+      speakQueue.addTask({
+        audioBuffer,
+        screenplay,
+        isNeedDecode,
+        onComplete,
+      })
     })
   }
 }

src/features/messages/speakQueue.ts

@@ -0,0 +1,69 @@
+import { Screenplay } from './messages'
+import homeStore from '@/features/stores/home'
+
+type SpeakTask = {
+  audioBuffer: ArrayBuffer
+  screenplay: Screenplay
+  isNeedDecode: boolean
+  onComplete?: () => void
+}
+
+export class SpeakQueue {
+  private static readonly QUEUE_CHECK_DELAY = 1500
+  private queue: SpeakTask[] = []
+  private isProcessing = false
+
+  async addTask(task: SpeakTask) {
+    this.queue.push(task)
+    await this.processQueue()
+  }
+
+  private async processQueue() {
+    if (this.isProcessing) return
+    this.isProcessing = true
+    const hs = homeStore.getState()
+
+    while (this.queue.length > 0) {
+      const task = this.queue.shift()
+      if (task) {
+        try {
+          const { audioBuffer, screenplay, isNeedDecode, onComplete } = task
+          await hs.viewer.model?.speak(audioBuffer, screenplay, isNeedDecode)
+          onComplete?.()
+        } catch (error) {
+          console.error(
+            'An error occurred while processing the speech synthesis task:',
+            error
+          )
+          if (error instanceof Error) {
+            console.error('Error details:', error.message)
+          }
+        }
+      }
+    }
+
+    this.isProcessing = false
+    this.scheduleNeutralExpression()
+  }
+
+  private async scheduleNeutralExpression() {
+    const initialLength = this.queue.length
+    await new Promise((resolve) =>
+      setTimeout(resolve, SpeakQueue.QUEUE_CHECK_DELAY)
+    )
+
+    if (this.shouldResetToNeutral(initialLength)) {
+      const hs = homeStore.getState()
+      console.log('play neutral')
+      await hs.viewer.model?.playEmotion('neutral')
+    }
+  }
+
+  private shouldResetToNeutral(initialLength: number): boolean {
+    return initialLength === 0 && this.queue.length === 0 && !this.isProcessing
+  }
+
+  clearQueue() {
+    this.queue = []
+  }
+}

src/features/vrmViewer/model.ts

@@ -1,5 +1,10 @@
 import * as THREE from 'three'
-import { VRM, VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm'
+import {
+  VRM,
+  VRMExpressionPresetName,
+  VRMLoaderPlugin,
+  VRMUtils,
+} from '@pixiv/three-vrm'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { VRMAnimation } from '../../lib/VRMAnimation/VRMAnimation'
 import { VRMLookAtSmootherLoaderPlugin } from '@/lib/VRMLookAtSmootherLoaderPlugin/VRMLookAtSmootherLoaderPlugin'
@@ -86,6 +91,13 @@ export class Model {
     })
   }
 
+  /**
+   * 感情表現を再生する
+   */
+  public async playEmotion(preset: VRMExpressionPresetName) {
+    this.emoteController?.playEmotion(preset)
+  }
+
   public update(delta: number): void {
     if (this._lipSync) {
       const { volume } = this._lipSync.update()