In Alexa Presentation Language, how do I use speakList in an AlexaTextList

70 Views Asked by At

I'm trying to use the speakList command for an AlexaTextList.

From the developer documentation it would appear that I need a combination of these controls in the APL document:

listId Also set this parameter to an ID if you need to target the list for commands, such as the SpeakList command.

speechItems An array of speech items. The template assigns each item in this array to the speech property of the corresponding list item. Use this property when you want to use the SpeakList command to speak the list items.

What I want to do is speak and scroll the list on mount. The scroll is working but I can't get the speech items read.

This is my APL document:

{
    "type": "APL",
    "version": "1.8",
    "license": "Copyright 2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.\nSPDX-License-Identifier: LicenseRef-.amazon.com.-AmznSL-1.0\nLicensed under the Amazon Software License  http://aws.amazon.com/asl/",
    "theme": "dark",
    "onMount": [
        {
            "type": "SpeakItem",
            "componentId": "firstSpeak"
        },
        {
            "type": "SpeakList",
            "componentId": "itemsList",
            "start": 0,
            "count": 6,
            "minimumDwellTime": 800,
            "align": "center"
        }
    ],
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.5.0"
        }
    ],
    "styles": {},
    "commands": {},
    "resources": [
        {
            "description": "Public resource definitions for text list - defaults",
            "dimensions": {
                "textListPaddingStart": "0",
                "textListGutter": "0"
            },
            "strings": {
                "textListScrollDirection": "vertical"
            }
        },
        {
            "description": "Public resource definitions for text list - tv-landscape-overlay",
            "when": "${@viewportProfile == @tvLandscapeOverlay}",
            "dimensions": {
                "textListPaddingStart": "@marginHorizontal",
                "textListGutter": "@spacingMedium"
            },
            "strings": {
                "textListScrollDirection": "horizontal"
            }
        }
    ],
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "type": "Container",
                "width": "100%",
                "height": "100%",
                "items": [
                    {
                        "type": "AlexaLists",
                        "onMount": [],
                        "listId": "itemsList",
                        "imageMetadataPrimacy": true,
                        "headerTitle": "${payload.data.properties.header.title}",
                        "headerAttributionImage": "${payload.data.properties.header.logoUrl}",
                        "headerDivider": true,
                        "backgroundImageSource": "${payload.data.properties.backgroundImage}",
                        "backgroundColorOverlay": true,
                        "listItems": "${payload.data.properties.listOfItems}",
                        "secondaryTextPosition": "top",
                        "tertiaryTextPosition": "bottom",
                        "speechItems": "${payload.data.properties.speakItems}",
                        "theme": "dark",
                        "primaryAction": [
                            {
                                "type": "SendEvent",
                                "arguments": [
                                    "${ordinal}",
                                    "${payload.data.properties.listItems[ordinal-1].primaryText}"
                                ]
                            }
                        ]
                    },
                    {
                        "type": "Text",
                        "id": "firstSpeak",
                        "speech": "${payload.data.properties.outputSpeech}"
                    }
                ]
            }
        ]
    }
}

This is the dataSources:

{
    "data": {
        "type": "object",
        "properties": {
            "backgroundImage": "myBackground.png",
            "textToSpeak": "this text is read first",
            "header": {
                "title": "My Header Title",
                "logoUrl": "myLogoUrl.png"
            },
            "listOfItems": [
                {
                    "primaryText": "firstPrimaryText",
                    "secondaryText": "firstSecondaryText",
                    "tertiaryText": "firstTertiaryText",
                    "imageThumbnailSource": "myFirstThumb.png"
                },
                {
                    "primaryText": "secondPrimaryText",
                    "secondaryText": "secondSecondaryText",
                    "tertiaryText": "secondTertiaryText",
                    "imageThumbnailSource": "mySecondThumb.png"
                },
                {
                    "primaryText": "thirdPrimaryText",
                    "secondaryText": "thirdSecondaryText",
                    "tertiaryText": "thirdTertiaryText",
                    "imageThumbnailSource": "myThirdThumb.png"
                }
            ],
            "speakItems": [
                "first listed item",
                "second listed item",
                "third listed item"
            ]
        },
        "transformers": [
            {
                "inputPath": "textToSpeak",
                "transformer": "textToSpeech",
                "outputName": "outputSpeech"
            },
            {
                "inputPath": "speakItems",
                "transformer": "textToSpeech",
                "outputName": "output_List"
            }
        ]
    }
}

The examples of using speakList are few. I found very good example that used an additional ordinal to force a command to scroll and speak but then I had issues with formatting and using some of the components that I want to have. The documentation seems to point to doing this natively without the use of a transformer. At the moment my document loads, it speaks the first item and then scrolls the list so, I'm on the right track.

There is an additional point in the documentation for speakList:

Some environments might not allow dialog, including speech. Use the environment property disallowDialog to determine whether the device and configuration supports speech-related commands.

although I don't think that applies here.

I've tried pointing the onMount command at the additional transformer, in the dataSource, output_List without success. I've also tried setting a text component to be read as a list with the component pointing to the transformer and the command pointing to the component. That also didn't work.

At the moment, the document loads, the firstSpeak item is read, the list scrolls but the individual list items are not spoken.

How do I use the speakList command?

1

There are 1 best solutions below

0
On

According to the documentation, I think you're inputPath may be wrong for your speakItems. See below:

"transformers": [
    {
        "inputPath": "textToSpeak",
        "transformer": "textToSpeech",
        "outputName": "outputSpeech"
    },
    {
        "inputPath": "speakItems.*",
        "transformer": "textToSpeech",
        "outputName": "output_List"
    }
]