Speak Text - Highlight Mode

I read from some users postings in APL forums that skill certification gets delayed if long text blocks does not have “highlight” and “scrolling” implemented.

In VF Speak block, how do I “highlight” text while Alexa speaks.

.

I resolved this issue. The components to use are as follows:

  • onMount - command - SpeakItem
  • style declaration with a karaoke state
  • Transformer element with ssml tag
  • speech property

Using the above, one can get SpeakItem, highlightMode and scroll-mode to work.

Here is the APL document. Works fine on Simulator as well as Echo device…

{
	"document": {
		"type": "APL",
		"version": "1.3",
		"theme": "dark",
		"import": [
			{
				"name": "alexa-layouts",
				"version": "1.1.0"
			}
		],
		"resources": [],
		"layouts": {},
		"mainTemplate": {
			"parameters": [
				"payload"
			],
			"items": [
				{
					"type": "Container",
					"width": "100%",
					"height": "100%",
					"items": [
						{
							"type": "AlexaHeader",
							"headerTitle": "Victoria Falls",
							"headerBackgroundColor": "purple"
						},
						{
							"type": "ScrollView",
							"style": "flip",
							"height": "400",
							"paddingTop": "20",
							"item": [
								{
									"type": "Text",
									"id": "abcd",
									"style": "flip",
									"speech": "${payload.data.properties.values[0].speech}",
									"onMount": [
										{
											"type": "SpeakItem",
											"componentId": "abcd",
											"highlightMode": "line"
										}
									],
									"width": "600",
									"paddingLeft": "20",
									"textAlign": "left",
									"fontSize": "6vh",
									"text": "${payload.data.properties.values[0].text}"
								}
							]
						},
						{
							"type": "Frame",
							"width": "100%",
							"position": "absolute",
							"item": [
								{
									"type": "AlexaFooter",
									"hintText": "Say, Next or More or Stop"
								}
							],
							"backgroundColor": "#DC143C",
							"top": "510"
						}
					]
				}
			]
		},
		"styles": {
			"flip": {
				"values": [
					{
						"color": "yellow",
						"fontWeight": 1600
					},
					{
						"when": "${state.karaoke}",
						"color": "red",
						"fontWeight": 1300
					},
					{
						"when": "${state.karaokeTarget}",
						"color": "blue"
					}
				]
			}
		}
	},
	"datasources": {
		"data": {
			"type": "object",
			"properties": {
				"values": [
					{
						"ssml": "<speak>David Livingstone, a Scottish explorer named the Victoria Falls, on 16 November 1855, from what is now known as Livingstone Island. Livingstone named his sighting in honor of Queen Victoria of Britain, but the Sotho language name, Mosi-oa-Tunya, meaning \"The Smoke That Thunders\", continues in common usage. Victoria falls is neither the highest nor the widest waterfall in the world. It is classified as the largest, based on its combined width of 1,700 metres (5,604 ft) with a height of 108 metres (354 ft), resulting in the world's largest sheet of falling water. Victoria Falls is roughly twice the height of Niagara Falls and over twice the width of the Horseshoe Falls. In height and width Victoria Falls is rivalled only by the Iguazu Falls. For a considerable distance upstream from the falls, the Zambezi flows over a level sheet of basalt, in a shallow valley, bounded by low and distant sandstone hills. The river's course is dotted with numerous tree-covered islands, which increase in number as the river approaches the falls. There are no mountains, escarpments, or deep valleys; only a flat plateau extending hundreds of kilometres in all directions.</speak>",
						"text": "<speak>David Livingstone, a Scottish explorer named the Victoria Falls, on 16 November 1855, from what is now known as Livingstone Island. Livingstone named his sighting in honor of Queen Victoria of Britain, but the Sotho language name, Mosi-oa-Tunya, meaning \"The Smoke That Thunders\", continues in common usage. Victoria falls is neither the highest nor the widest waterfall in the world. It is classified as the largest, based on its combined width of 1,700 metres (5,604 ft) with a height of 108 metres (354 ft), resulting in the world's largest sheet of falling water. Victoria Falls is roughly twice the height of Niagara Falls and over twice the width of the Horseshoe Falls. In height and width Victoria Falls is rivalled only by the Iguazu Falls. For a considerable distance upstream from the falls, the Zambezi flows over a level sheet of basalt, in a shallow valley, bounded by low and distant sandstone hills. The river's course is dotted with numerous tree-covered islands, which increase in number as the river approaches the falls. There are no mountains, escarpments, or deep valleys; only a flat plateau extending hundreds of kilometres in all directions.</speak>"
					}
				]
			},
			"transformers": [
				{
					"inputPath": "values[*].ssml",
					"outputName": "speech",
					"transformer": "ssmlToSpeech"
				}
			]
		}
	}
}