メッセージ送信 or リスニング開始でAIの発音を止める

[tegnike]

No description provided.

[github-actions]

Issue分析結果:

[
  {
    "file_path": "src/features/messages/speakCharacter.ts",
    "reason": "このファイルはキャラクターの発話処理を管理しており、AIの音声出力を制御する機能が含まれている可能性が高いため、Issue の「AIの発音を止める」という要求に関連していると考えられます。"
  },
  {
    "file_path": "src/features/lipSync/lipSync.ts",
    "reason": "リップシンク機能を制御するこのファイルは、音声出力と密接に関連しているため、AIの発話を停止する機能を実装する際に修正が必要になる可能性があります。"
  },
  {
    "file_path": "src/features/vrmViewer/model.ts",
    "reason": "VRMモデルの制御を行うこのファイルには、キャラクターの発話やアニメーションに関する処理が含まれている可能性が高く、AIの発話を停止する機能を実装する際に変更が必要になる可能性があります。"
  },
  {
    "file_path": "src/features/messages/messages.ts",
    "reason": "メッセージ処理に関するユーティリティ関数を提供するこのファイルは、AIの発話制御にも関与している可能性があり、Issue の解決に関連する可能性があります。"
  },
  {
    "file_path": "src/features/chat/aiChatFactory.ts",
    "reason": "AIチャットの管理を行うこのファイルは、AIの応答生成と密接に関連しているため、発話の制御にも影響を与える可能性があります。"
  },
  {
    "file_path": "src/components/messageInputContainer.tsx",
    "reason": "ユーザー入力とAI応答のインターフェースを管理するこのコンポーネントは、メッセージ送信やリスニング開始のトリガーとなる可能性があるため、Issue の解決に関連すると考えられます。"
  },
  {
    "file_path": "src/components/messageInput.tsx",
    "reason": "メッセージ入力コンポーネントであり、ユーザーがメッセージを送信する際のインターフェースを提供しているため、AIの発話を停止するトリガーとなる可能性があります。"
  },
  {
    "file_path": "src/pages/index.tsx",
    "reason": "アプリケーションのメインコンポーネントであり、AIの発話制御やユーザーインタラクションの管理を行っている可能性が高いため、Issue の解決に直接関わる可能性があります。"
  },
  {
    "file_path": "src/features/emoteController/emoteController.ts",
    "reason": "キャラクターの感情表現を制御するこのファイルは、発話と関連して動作している可能性があり、AIの発話停止時に感情表現も調整する必要がある可能性があります。"
  },
  {
    "file_path": "src/features/youtube/youtubeComments.ts",
    "reason": "YouTubeコメント処理を行うこのファイルは、外部入力によるAIの応答のトリガーとなる可能性があり、発話の制御に関連する可能性があります。"
  },
  {
    "file_path": "src/components/chatLog.tsx",
    "reason": "チャットログを表示するコンポーネントであり、AIの発話状態を視覚的に表現する可能性があるため、Issue の解決に関連する可能性があります。"
  },
  {
    "file_path": "src/features/constants/systemPromptConstants.ts",
    "reason": "システムプロンプトの定義を含むこのファイルは、AIの動作設定に関与している可能性があり、発話の制御に関する指示を追加する必要がある可能性があります。"
  },
  {
    "file_path": "src/features/koeiromap/koeiromap.ts",
    "reason": "音声合成に関する処理を行うこのファイルは、AIの発話生成に直接関わっているため、発話を停止する機能の実装に関連する可能性が高いです。"
  },
  {
    "file_path": "src/features/googletts/googletts.ts",
    "reason": "Google Text-to-Speech APIを使用した音声合成を行うこのファイルは、AIの発話生成に関わっているため、発話を停止する機能の実装に関連する可能性があります。"
  },
  {
    "file_path": "src/components/menu.tsx",
    "reason": "アプリケーションのメニュー部分を管理するこのコンポーネントに、AIの発話を停止するための新しいコントロールを追加する必要がある可能性があります。"
  }
]

コード改善案:

このIssueは、メッセージ送信またはリスニング開始時にAIの発音を停止する機能の実装を求めています。現在のコードでは、音声の再生と停止の制御が十分に実装されていないようです。主に`src/features/messages/speakCharacter.ts`と`src/features/vrmViewer/model.ts`ファイルに関連する改善が必要です。また、ユーザーインターフェース部分（`src/components/messageInputContainer.tsx`）も、この機能をサポートするために修正が必要です。 1. 音声再生の制御機能の追加 説明: 現在の`speakCharacter`関数には、再生中の音声を停止する機能がありません。これを追加することで、新しいメッセージ送信時やリスニング開始時に音声を停止できるようになります。 改善後のコード例: ```typescript // src/features/messages/speakCharacter.ts

let currentAudio: HTMLAudioElement | null = null;

const createSpeakCharacter = () => {
// ... 既存のコード ...

 return (
   screenplay: Screenplay,
   onStart?: () => void,
   onComplete?: () => void
 ) => {
   // 既存の音声を停止
   if (currentAudio) {
     currentAudio.pause();
     currentAudio = null;
   }

   // ... 既存のコード ...

   prevSpeakPromise = Promise.all([fetchPromise, prevSpeakPromise]).then(
     ([audioBuffer]) => {
       if (!audioBuffer) {
         return;
       }
       const hs = homeStore.getState();
       currentAudio = new Audio(URL.createObjectURL(new Blob([audioBuffer])));
       return currentAudio.play();
     }
   );
   // ... 既存のコード ...
 };

};

export const stopSpeaking = () => {
if (currentAudio) {
currentAudio.pause();
currentAudio = null;
}
};

2. メッセージ入力時の音声停止機能の実装
説明: ユーザーがメッセージを入力し始めた時点で音声を停止することで、よりスムーズな対話体験を提供できます。
改善後のコード例:
```typescript
// src/components/messageInputContainer.tsx

import { stopSpeaking } from '@/features/messages/speakCharacter';

// ... 既存のコード ...

const handleInputChange = useCallback(
  (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setUserMessage(e.target.value);
    stopSpeaking(); // 入力開始時に音声を停止
  },
  []
);

// ... 既存のコード ...

3. リスニング開始時の音声停止機能の実装
   説明: 音声認識開始時に再生中の音声を停止することで、ユーザーの発話をよりクリアに認識できるようになります。
   改善後のコード例:

   // src/components/messageInputContainer.tsx
   
   import { stopSpeaking } from '@/features/messages/speakCharacter';
   
   // ... 既存のコード ...
   
   const startListening = useCallback(() => {
     if (recognition && !isListening) {
       stopSpeaking(); // リスニング開始時に音声を停止
       transcriptRef.current = '';
       setUserMessage('');
       recognition.start();
       setIsListening(true);
     }
   }, [recognition, isListening]);
   
   // ... 既存のコード ...

4. VRMモデルのリップシンク停止機能の追加
   説明: 音声停止時にVRMモデルのリップシンクも停止させることで、視覚的な一貫性を保ちます。
   改善後のコード例:

   // src/features/vrmViewer/model.ts
   
   export class Model {
     // ... 既存のコード ...
   
     public stopSpeaking() {
       if (this._lipSync) {
         this._lipSync.stop();
       }
       if (this.emoteController) {
         this.emoteController.stopLipSync();
       }
     }
   
     // ... 既存のコード ...
   }

5. グローバルな音声制御関数の実装
   説明: アプリケーション全体で簡単に音声を制御できるようにするため、グローバルな制御関数を実装します。
   改善後のコード例:

   // src/features/audio/audioController.ts
   
   import { stopSpeaking as stopTTS } from '@/features/messages/speakCharacter';
   import homeStore from '@/features/stores/home';
   
   export const stopAllAudio = () => {
     stopTTS();
     const hs = homeStore.getState();
     hs.viewer.model?.stopSpeaking();
   };

これらの改善を実装することで、メッセージ送信時やリスニング開始時にAIの発音を適切に停止できるようになります。これにより、ユーザーとAIのコミュニケーションがよりスムーズになり、全体的なユーザーエクスペリエンスが向上します。また、音声の制御機能が統合され、コードの保守性と拡張性も向上します。

これらの変更を適用する際は、既存の機能に影響を与えないよう注意深くテストを行う必要があります。また、新しく追加した関数や機能について、適切なドキュメンテーションを作成することも重要です。