– TTS APIから得られるVisemeデータとVRMモデルがあれば、リップシンクデモをリアルタイムで実現できる
– Rhubarbで生成されたJSON（Visemeデータ）を、TTS APIがリアルタイムで出力するVisemeデータに置き換えることで、既存のThree.js/VRMのロジックを応用できる
### TTS API連携の場合（実現したいこと）
– TTS APIからのVisemeイベントストリーム
– 再生時間と**Visemeイベントのoffset**を比較し、Viseme IDに対応するVRMブレンドシェイプを適用する.
– TTS API固有のViseme IDをVRMのブレンドシェイプ名 (A, I, U, E, O, NEUTRAL) にマッピングする.
1. TTS API呼び出しとデータ取得
テキスト入力: ユーザーがテキストを入力するためのUI（textareaやinput）と、API呼び出し用のボタンを追加します。
API接続: 選択したTTS API（例: Azure Neural TTS）のエンドポイントに、入力テキストを含むリクエストを送信するJavaScriptコードを実装します.
データ受信: APIから返される合成音声データとVisemeイベントデータ（タイムスタンプ付きの口形情報）を同時に受け取るロジックを構築します.
2. リアルタイム再生とVisemeキューの処理
音声再生: 受信した音声データをWeb Audio APIでリアルタイムにデコード・再生します。
Visemeキューリストの作成: TTS APIから受け取ったVisemeイベントを、あなたのlipsyncData.mouthCuesと同様の形式（start時刻とvalue）のキューリストとしてメモリに保持します。
3. updateLipsync()関数の調整
あなたの既存のupdateLipsync()関数はそのまま使えますが、RhubarbのViseme ID（A, B, C, …）ではなく、TTS APIが使用するViseme IDに合わせてmouthShapeMapのキーを更新する必要があります.
例: Azure TTSはviseme id=”1″（唇を閉じている状態）、viseme id=”2″（Aの音）などの数値IDを使う場合があります.
