> For the complete documentation index, see [llms.txt](https://docs.digitalhumans.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digitalhumans.jp/ops/control/speech-events.md).

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

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

## 概要

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

## タグの書き方

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

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

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

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

```jsx
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;
  }
});
```

## 活用例

### 画像の表示

```jsx
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）](/ops/control/speak-api-asynchronous.md) — デジタルヒューマンに任意のテキストを発話させる
* [SSML の利用](/ops/control/speech-control-ssml.md) — 発話のスピードやポーズを細かく制御する
* [イベント](/dev/hosted-experience/hosted-experience-events-2.md) — `SpeechEvent` を含むすべてのイベント一覧