読み上げと画面のテキストを同期する

Note: Sign in to the developer console to build or publish your skill.

読み上げと画面のテキストを同期する

スキル応答では、APL Textコンポーネントに読み上げ音声を関連付け、音声オーディオの再生に合わせてテキストの行を強調表示するコマンドを発行できます。これにより、テキストブロックの再生中の行を示す「カラオケ」効果を作成できます。

この機能を使用するには、読み上げデータをプレーンテキストまたは音声合成マークアップ言語（SSML）式でマークアップしたテキストとして提供する必要があります。Alexa搭載デバイスでこのデータを使用するには、まず音声に変換する必要があります。この変換を有効にするには、ssmlToSpeechトランスフォーマーを使用してテキストを音声に変換し、SSML式からSSMLタグを取り除きます。これらのトランスフォーマーをaudioタグと一緒に使用することはできません。

ssmlToSpeechおよびssmlToTextトランスフォーマー

ssmlToSpeechおよびssmlToTextトランスフォーマー

プロパティ	型	必須	説明
`transformer`	列挙型：`ssmlToSpeech` \| `ssmlToText`	◯	必要な変換のタイプを指定します。初期状態では、次の2つのトランスフォーマーを利用できます。 1）`ssmlToSpeech`は、データソースの値をTTS URLに変換します。2）`ssmlToText`は、SSML式からSSMLタグを取り除いてプレーンテキストに変換します。
`inputPath`	文字列	◯	変換する必要のあるデータソースの値のパスです。
`outputName`	文字列	×	変換された出力を格納するデータソースのプロパティ名です。この出力プロパティは常に、入力プロパティの兄弟になります。`outputName`を指定しない場合は、`inputPath`内の値がトランスフォーマーの出力値で置き換えられます。

次のサンプルAPLドキュメントは、猫の秘密にバインドされたTextコンポーネントに音声を関連付ける「猫の秘密」スキルを示しています。このTextコンポーネントは、ScrollViewコンポーネントにラップされています。このため、猫の秘密が読み上げられるのに合わせて、デバイスは画面に表示されていないテキスト部分に自動的にスクロールします。

音声にバインドされたTextコンポーネントを表示するAPLドキュメントの一部

{
    "type": "ScrollView",
    "item": {
        "type": "Text",
        "id": "catFactText",
        "text": "${catFactData.properties.catFact}",
        "speech": "${catFactData.properties.catFactSpeech}"
    }
}

次のサンプルは、スキル開発者から送信された、上記のドキュメントに対応するオブジェクトデータソースとトランスフォーマーを示しています。

APLドキュメントにバインドされたオブジェクトデータソースとトランスフォーマー

{
 "datasources": {
  "catFactData": {
   "type": "object",
   "properties": {
    "backgroundImage": "https://.../catfacts.png",
    "title": "猫の秘密 #9",
    "logoUrl": "https://.../logo.png",
    "image": "https://.../catfact9.png",
    "catFactSsml": "<speak>すべての猫が<emphasis level='strong'>マタタビ</emphasis>を好むとは限りません。</speak>"
   },
   "transformers": [{
     "inputPath": "catFactSsml",
     "outputName": "catFactSpeech",
     "transformer": "ssmlToSpeech"
    },
    {
     "inputPath": "catFactSsml",
     "outputName": "catFact",
     "transformer": "ssmlToText"
    }
   ]
  }
 }
}

次のスニペットは、デバイスに設定される変換後のデータソースを示しています。

デバイスが受け取る変換後のデータソース

{
    "datasources": {
        "catFactData": {
            "type": "object",
            "properties": {
                "backgroundImage": "https://.../catfacts.png",
                "title": "猫の秘密 #9",
                "logoUrl": "https://.../logo.png",
                "image": "https://.../catfact9.png",
                "catFactSsml": "<speak>すべての猫が<emphasis level='strong'>マタタビ</emphasis>を好むとは限りません。</speak>",
                "catFactSpeech": "https://tinyurl.amazon.com/aaaaaa/catfact.mp3",
                "catFact": "すべての猫がマタタビを好むとは限りません。"**
            }
        }
    }
}

猫の秘密を読み上げるには、Alexa.Presentation.APL.ExecuteCommandsディレクティブをSpeakItemコマンドと共に使用する必要があります。次のスニペットは、猫の秘密を読み上げるために使用できるAlexa.Presentation.APL.ExecuteCommandsディレクティブを示しています。ExecuteCommandsディレクティブで渡しているtokenは必須です。これは、APLドキュメントのレンダリングに使用するRenderDocumentディレクティブでスキルから渡すトークンと一致する必要があります。

SpeakItemコマンドを含むAlexa.Presentation.APL.ExecuteCommandsスキルディレクティブ

{
    "type" : "Alexa.Presentation.APL.ExecuteCommands",
    "token": "[SkillProvidedToken]",
    "commands": [{
        "type": "SpeakItem",
        "componentId" : "catFactText"
    }]
}

このページは役に立ちましたか？

フィードバックを送信

最終更新日: 2025 年 11 月 19 日