Build Immersive Audio and Visual Alexa Skills with New Alexa Presentation Language (APL) Features

Austin Vach Nov 06, 2020
Share:
Launch Multimodal Game Skills
Blog_Header_Post_Img

We are excited to announce new audio and visual features that enable you to build richer responses for Alexa skills. APL 1.5 adds new responsive components, new image filters and blending capabilities, support for AVG shadows, new accessibility features and more. APL for Audio 0.9 (beta) adds compositions and resources, named component configurations and properties that simplify content reuse, and improved authoring tool features. Check out the APL 1.5 and APL for Audio 0.9 (beta) technical documentation to get started today.

New Visual Features

New Responsive Components

APL 1.5 adds the following responsive components that enable you to quickly create intuitive and natural visual responses.

  • Swipe to Action: Displays an item the user can swipe to perform an action.
  • Radio Button: Displays a radio button the user can toggle on and off.
  • Check Box: Displays a check box the user can toggle on and off.
  • Switch: Displays a switch the user can slide between on and off.

New Image Filters and Blending Capabilities

The image component now accepts an array of values in the source property and new image filters allow you to modify images or combine images in a variety of ways, enabling you to reduce the number of assets you need to create a visual response. For example, you can:

Blend two images together.

Two ducks imposed on a lake image

Blend an image with a color or gradient.

Two ducks in a purple gradient

Apply desaturation and grascale filters.

Two ducks in grayscale
Alexa Vector Graphic Shadows

Alexa Vector Graphics (AVG) now support shadows which allows you to add depth to your visuals in an efficient way, making visuals more glanceable. Below is an example of an AVG Text Item.

Copied to clipboard
{
    "type": "AVG",
    "version": "1.2",
    "height": 1000,
    "width": 1000,
    "items": {
        "type": "text",
        "fill": "orange",
        "fontWeight": "bold",
        "fontFamily": "amazon-ember, sans-serif",
        "fontSize": 120,
        "text": "5 o'clock",
        "x": 10,
        "y": 100,
        "filters": [
            {
                "type": "DropShadow",
                "color": "black",
                "horizontalOffset": 3,
                "radius": 3,
                "verticalOffset": 3
            }
        ]
    }
}
5 o'clock with a shadow
New Accessibility Features

You can take advantage of new accessibility features to deliver improved experiences for customers using assistive technologies. APL 1.5 adds new accessibility properties to the environment object (fontScale, screenMode, screenReader, and timing ) and adds actions and role properties to the base component. The actions property allows users to programmatically invoke components, and the role property provides machine-readable information about the purpose of the component. This allows you to create skills that enable vision-impaired customers to perform common touch interactions, such as tapping or swiping on screen, using only their voice. Note: You can test your skill using the Alexa Accessibility features.

Sample Component w/Actions Property

The following touchable element has one standard action (“activate”) which registers as a single press and release.

Copied to clipboard
{
    "type": "TouchWrapper",
    "actions": [
        {
            "name": "activate",
            "label": "Reply to user",
            "command": {
                "type": "SendEvent",
                "arguments": "Activated by action invocation"
            }
        }
    ]
}
New Functions

  • String Functions: A new String.length(x) function returns the length of a string.
  • Math Functions: New Math.isFinite(x), Math.isInf(x), and Math.isNaN(x) functions test whether numbers are finite, infinite, or Not-A-Number (NAN).
  • Array Functions: New Array.indexOf(x,y), Array.range(x,y[,z]), and Array.slice(x,y[,z]) functions allow you to manipulate arrays.

New Audio Features (Beta)

Compositions 

Compositions combine primitive components into a new custom component you can reuse multiple times in the main template of your APLA document. Compositions simplify your workflow allowing you to only provide the parameters requested by the composition.

Sample Composition
The composition has two parameters called visitor and punchline. The parameters are passed to the Speech components, which generate speech using SSML.

Copied to clipboard
"compositions": {
    "KnockKnock": {
        "parameters": [
            {
                "name": "visitor",
                "type": "string"
            },
            {
                "name": "punchline",
                "type": "string"
            }
        ],
        "items": [
            {
                "type": "Sequencer",
                "items": [
                    {
                        "type": "Speech",
                        "contentType": "SSML",
                        "content": "<speak><say-as interpret-as='interjection'>knock knock</say-as>.</speak>"
                    },
                    {
                        "type": "Speech",
                        "contentType": "SSML",
                        "content": "<speak><voice name='Joey'>Who's There</voice></speak>"
                    },
                    {
                        "type": "Speech",
                        "contentType": "SSML",
                        "content": "<speak>${visitor}</speak>"
                    },
                    {
                        "type": "Speech",
                        "contentType": "SSML",
                        "content": "<speak><voice name='Joey'>${visitor} who?</voice></speak>"
                    },
                    {
                        "type": "Speech",
                        "contentType": "SSML",
                        "content": "<speak>${punchline}</speak>"
                    },
                    {
                        "type": "Silence",
                        "duration": "500"
                    }
                ]
            }
        ]
    }
}

Sample Response using the KnockKnock Composition
When rendered, the following response will speak all three knock knock jokes in sequence. 

Copied to clipboard
"mainTemplate": {
    "parameters": [
        "payload"
    ],
    "item": {
        "type": "Sequencer",
        "items": [
            {
                "type": "KnockKnock",
                "visitor": "Cereal",
                "punchline": "Cereal pleasure to meet you."
            },
            {
                "type": "KnockKnock",
                "visitor": "Alpaca",
                "punchline": "Alpaca the trunk, you pack the suitcase."
            },
            {
                "type": "KnockKnock",
                "visitor": "Voodoo",
                "punchline": "Voodoo you think you are asking me so many questions?"
            }
        ]
    }
}
Resources

Resources are named entities you can access through data-binding. You define resources in blocks within your APLA document and create conditional resources based on values in the environment property.

Sample Resources
In this example, you can name numbers to use later in a pair within a volume filter. By defining the numbers as resources, you can use the resources in multiple locations and update all references to the volume of multiple components by updating the value.

Copied to clipboard
"resources":[
    {
        "number": {
            "quiet": 0.5,
            "loud": 1.5
        }
    }
]

To use a resource in your document, use the @ syntax. 

Sample Component using APLA Resource

Copied to clipboard
"mainTemplate": {
    "parameters": [
        "payload"
    ],
    "item": {
        "type": "Sequencer",
        "items": [
            {
                "type": "Speech",
                "content": "John Jacob Jingleheimer Schmidt, his name is my name too.",
                "filter":[
                    {
                        "type": "Volume",
                        "amount": "@quiet"
                    }
                ]
            },
            {
                "type": "Speech",
                "content": "Whenever I go out, the people always shout"
            },
            {
                "type": "Speech",
                "content": "There goes John Jacob Jingleheimer Schmidt!",
                "filter":[
                    {
                        "type": "Volume",
                        "amount": "@loud"
                    }
                ]
            },
            {
                "type": "Speech",
                "content": "Nanananananana",
                "filter":[
                    {
                        "type": "Volume",
                        "amount": "@quiet"
                    }
                ]
            }
        ]
    }
}
Authoring Tool Improvements

Ever wish you could focus on a specific segment of an audio response? With the updated APLA authoring tool you can now click in the timeline to listen to different portions of your response, select a portion of the timeline to play, and turn on a loop mode to repeatedly play back the entire response or just the portion you selected.

Improved Error Reporting

You now receive error events that notify you about any errors that happened during APL audio processing.

Get Started Today

Read more about APL and APL for Audio (beta) and reach out to Product Managers Arun and Austin on Twitter  (@aruntalkstech and @austinvach) if you have any questions.

Subscribe