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

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

テキストブロックでのAPL音声およびテキストの同期

スキル応答では、音声を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は必須です。このtokenは、APLドキュメントの表示に使用するRenderDocumentディレクティブでスキルによって渡されるトークンと一致する必要があります。

SpeakItemコマンドでのAlexa.Presentation.APL.ExecuteCommandsスキルディレクティブ

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

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

フィードバックを送信