発話イベント（スピーチイベント）

デジタルヒューマンの応答テキストにイベントタグを埋め込むことで、発話の特定タイミングに合わせてフロントエンドのアクションをトリガーできます。

概要

「発話イベント（スピーチイベント）」を使うと、デジタルヒューマンの発話とウェブページの演出を精密に同期させることができます。チャットボットの応答テキストや SpeakAPI で発話させるテキストに <uneeq:custom_event> タグを埋め込み、その箇所が読み上げられた瞬間にフロントエンドでカスタムイベントを受け取ります。

タグの書き方

こんにちは。当社の最新製品をご紹介します。<uneeq:custom_event name="show_product_image" /> ご覧のとおり、この製品は...

タグが読み上げられるタイミングで SpeechEvent メッセージが発火します。チャットボットの応答テキストでも、speak() メソッドでの発話指示でも動作します。

フロントエンドでのイベント受信

UneeqMessage イベントリスナーで SpeechEvent を受け取ります。

window.addEventListener('UneeqMessage', (event) => {
  const msg = event.detail;

  switch (msg.uneeqMessageType) {
    case 'SpeechEvent':
      const eventName = msg.speechEvent.param_value;
      console.log('SpeechEvent:', eventName);
      // ここにカスタムアクションを実装
      break;

    default:
      break;
  }
});

活用例

画像の表示

window.addEventListener('UneeqMessage', (event) => {
  const msg = event.detail;

  if (msg.uneeqMessageType === 'SpeechEvent') {
    if (msg.speechEvent.param_value === 'show_product_image') {
      document.getElementById('productImage').style.display = 'block';
    }
  }
});

応答テキスト:

最新の製品をご覧ください。<uneeq:custom_event name="show_product_image" /> このモデルは...

その他のユースケース

用途	実装方法
画像・動画の表示	イベント名に応じて display を切り替える
ページ内スクロール	scrollIntoView() でセクションに移動
CSSアニメーション	クラスを付与してアニメーションをトリガー
グラフ・可視化の更新	データを再描画するハンドラを呼び出す

関連ページ

• SpeakAPI（スピークAPI） — デジタルヒューマンに任意のテキストを発話させる

• SSML の利用 — 発話のスピードやポーズを細かく制御する

• イベント — SpeechEvent を含むすべてのイベント一覧