question

zabbir hossain avatar image
zabbir hossain asked

APL Pager with Speech/Text Synchronization both jointly

i have implement APL pager and Speech/Text Synchronization Separately.

now I want to implement APL pager with Speech/Text Synchronization both jointly.

that means, The page that Alexa reads will show the page. The page should not change over time, it will change text reading this page.


How can I implement that?

Advance Thanks


My Index.js file code:


 
                
  1. return handlerInput.responseBuilder
  2.             .speak(speakOutput)
  3.             .addDirective({
  4.                 type: 'Alexa.Presentation.APL.RenderDocument',
  5.                 version: '1.0',
  6.                 token:'pagerToken',
  7.                 document: require('./templete/scc.json'),
  8.                 datasources: require('./templete/sccData.json'),
  9.               })
  10.              
  11.           .getResponse();


sccData.json:

 
                
  1. {
  2.     "longTextTemplateData": {
  3.         "type": "object",
  4.         "objectId": "longTextSample",
  5.         "properties": {
  6.             "backgroundImage": {
  7.                 "contentDescription": null,
  8.                 "smallSourceUrl": null,
  9.                 "largeSourceUrl": null,
  10.                 "sources": [
  11.                     {
  12.                         "url": "https://d2o906d8ln7ui1.cloudfront.net/images/templates_v2/bg_cheese_2.jpg",
  13.                         "size": "small",
  14.                         "widthPixels": 0,
  15.                         "heightPixels": 0
  16.                     },
  17.                     {
  18.                         "url": "https://d2o906d8ln7ui1.cloudfront.net/images/templates_v2/bg_cheese_2.jpg",
  19.                         "size": "large",
  20.                         "widthPixels": 0,
  21.                         "heightPixels": 0
  22.                     }
  23.                 ]
  24.             },
  25.             "title": "Did You Know?",
  26.             "textContent": {
  27.                 "primaryText": {
  28.                     "type": "PlainText",
  29.                     "text": " First Zabbir. But in reality, mice prefer grains, fruits, and manmade foods that are high in sugar, and tend to turn up their noses at very smelly foods, like cheese. In fact, a 2006 study found that mice actively avoid cheese and dairy in general. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting"
  30.                 }
  31.             },
  32.             "logoUrl": "https://d2o906d8ln7ui1.cloudfront.net/images/templates_v2/icon_cheese.png",
  33.             "cheeseSpeechSSML": "<speak>Welcome to Transcom News. Today is <break time='3s'/> First Zabbir.  But in reality, mice prefer grains, fruits, and manmade foods that are high in sugar, and tend to turn up their noses at very smelly foods, like cheese. In fact, a 2006 study found that mice actively avoid cheese and dairy in general. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</speak>"
  34.         },
  35.         "transformers": [
  36.             {
  37.                 "inputPath": "cheeseSpeechSSML",
  38.                 "transformer": "ssmlToSpeech",
  39.                 "outputName": "cheeseInfoSpeech"
  40.             }
  41.         ]
  42.     },
  43.     "longTextTemplateDataTwo": {
  44.         "type": "object",
  45.         "objectId": "longTextSample",
  46.         "properties": {
  47.             "backgroundImage": {
  48.                 "contentDescription": null,
  49.                 "smallSourceUrl": null,
  50.                 "largeSourceUrl": null,
  51.                 "sources": [
  52.                     {
  53.                         "url": "https://d2o906d8ln7ui1.cloudfront.net/images/templates_v2/bg_cheese_2.jpg",
  54.                         "size": "small",
  55.                         "widthPixels": 0,
  56.                         "heightPixels": 0
  57.                     },
  58.                     {
  59.                         "url": "https://d2o906d8ln7ui1.cloudfront.net/images/templates_v2/bg_cheese_2.jpg",
  60.                         "size": "large",
  61.                         "widthPixels": 0,
  62.                         "heightPixels": 0
  63.                     }
  64.                 ]
  65.             },
  66.             "title": "Did You Know?",
  67.             "textContent": {
  68.                 "primaryText": {
  69.                     "type": "PlainText",
  70.                     "text": "Second Zabbir. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable."
  71.                 }
  72.             },
  73.             "logoUrl": "https://d2o906d8ln7ui1.cloudfront.net/images/templates_v2/icon_cheese.png",
  74.             "cheeseSpeechSSML": "<speak>Second Zabbir. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</speak>"
  75.         },
  76.         "transformers": [
  77.             {
  78.                 "inputPath": "cheeseSpeechSSML",
  79.                 "transformer": "ssmlToSpeech",
  80.                 "outputName": "cheeseInfoSpeech"
  81.             }
  82.         ]
  83.     },
  84.     "longTextTemplateDataThree": {
  85.         "type": "object",
  86.         "objectId": "longTextSample",
  87.         "properties": {
  88.             "backgroundImage": {
  89.                 "contentDescription": null,
  90.                 "smallSourceUrl": null,
  91.                 "largeSourceUrl": null,
  92.                 "sources": [
  93.                     {
  94.                         "url": "https://d2o906d8ln7ui1.cloudfront.net/images/templates_v2/bg_cheese_2.jpg",
  95.                         "size": "small",
  96.                         "widthPixels": 0,
  97.                         "heightPixels": 0
  98.                     },
  99.                     {
  100.                         "url": "https://d2o906d8ln7ui1.cloudfront.net/images/templates_v2/bg_cheese_2.jpg",
  101.                         "size": "large",
  102.                         "widthPixels": 0,
  103.                         "heightPixels": 0
  104.                     }
  105.                 ]
  106.             },
  107.             "title": "Did You Know?",
  108.             "textContent": {
  109.                 "primaryText": {
  110.                     "type": "PlainText",
  111.                     "text": "Third Zabbir. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups"
  112.                 }
  113.             },
  114.             "logoUrl": "https://d2o906d8ln7ui1.cloudfront.net/images/templates_v2/icon_cheese.png",
  115.             "cheeseSpeechSSML": "<speak>Third Zabbir. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</speak>"
  116.         },
  117.         "transformers": [
  118.             {
  119.                 "inputPath": "cheeseSpeechSSML",
  120.                 "transformer": "ssmlToSpeech",
  121.                 "outputName": "cheeseInfoSpeech"
  122.             }
  123.         ]
  124.     }
  125. }


scc.json:

 
                
  1. {
  2.     "type": "APL",
  3.     "version": "1.4",
  4.     "settings": {},
  5.     "theme": "dark",
  6.     "import": [
  7.         {
  8.             "name": "alexa-layouts",
  9.             "version": "1.2.0"
  10.         }
  11.     ],
  12.     "resources": [],
  13.     "styles": {},
  14.     "graphics": {},
  15.     "commands": {},
  16.     "layouts": {},
  17.     "mainTemplate": {
  18.         "parameters": [
  19.             "payload"
  20.         ],
  21.         "items": [
  22.             {
  23.                 "type": "Pager",
  24.                 "id": "pagerComponentId",
  25.                 "navigation": "wrap",
  26.                 "height": "100%",
  27.                 "width": "100%",
  28.                 "item": [
  29.                     {
  30.                             "type": "Container",
  31.                             "height": "100vh",
  32.                             "items": [
  33.                                 {
  34.                                     "type": "AlexaBackground",
  35.                                     "backgroundImageSource": "${payload.longTextTemplateData.properties.backgroundImage.sources[0].url}",
  36.                                     "backgroundBlur": false,
  37.                                     "colorOverlay": true,
  38.                                     "backgroundScale": "best-fill"
  39.                                 },
  40.                                 {
  41.                                     "type": "Container",
  42.                                     "height": "100vh",
  43.                                     "width": "100vw",
  44.                                     "items": [
  45.                                         {
  46.                                             "type": "AlexaHeader",
  47.                                             "headerTitle": "${payload.longTextTemplateData.properties.title}",
  48.                                             "headerAttributionImage": "${payload.longTextTemplateData.properties.logoUrl}",
  49.                                             "headerDivider": false
  50.                                         },
  51.                                         {
  52.                                             "type": "ScrollView",
  53.                                             "grow": 1,
  54.                                             "paddingTop": "@spacingMedium",
  55.                                             "paddingBottom": "${@spacing3XLarge + @spacingXSmall}",
  56.                                             "paddingLeft": "@marginHorizontal",
  57.                                             "paddingRight": "@marginHorizontal",
  58.                                             "items": [
  59.                                                 {
  60.                                                     "type": "Text",
  61.                                                     "id": "CheeseContent",
  62.                                                     "style": "textStyleBody",
  63.                                                     "text": "${payload.longTextTemplateData.properties.textContent.primaryText.text}",
  64.                                                     "speech": "${payload.longTextTemplateData.properties.cheeseInfoSpeech}",
  65.                                                     "textAlign": "left"
  66.                                                 }
  67.                                             ]
  68.                                         }
  69.                                     ]
  70.                                 }
  71.                             
  72.                             ]
  73.                             
  74.                             },
  75.                             {
  76.                             "type": "Container",
  77.                             "height": "100vh",
  78.                             "items": [
  79.                                 {
  80.                                     "type": "AlexaBackground",
  81.                                     "backgroundImageSource": "${payload.longTextTemplateData.properties.backgroundImage.sources[0].url}",
  82.                                     "backgroundBlur": false,
  83.                                     "colorOverlay": true,
  84.                                     "backgroundScale": "best-fill"
  85.                                 },
  86.                                     {
  87.                                         "type": "Container",
  88.                                         "height": "100vh",
  89.                                         "width": "100vw",
  90.                                         "items": [
  91.                                             {
  92.                                                 "type": "AlexaHeader",
  93.                                                 "headerTitle": "${payload.longTextTemplateDataTwo.properties.title}",
  94.                                                 "headerAttributionImage": "${payload.longTextTemplateData.properties.logoUrl}",
  95.                                                 "headerDivider": false
  96.                                             },
  97.                                             {
  98.                                                 "type": "ScrollView",
  99.                                                 "grow": 1,
  100.                                                 "paddingTop": "@spacingMedium",
  101.                                                 "paddingBottom": "${@spacing3XLarge + @spacingXSmall}",
  102.                                                 "paddingLeft": "@marginHorizontal",
  103.                                                 "paddingRight": "@marginHorizontal",
  104.                                                 "items": [
  105.                                                     {
  106.                                                         "type": "Text",
  107.                                                         "id": "CheeseContentTwo",
  108.                                                         "style": "textStyleBody",
  109.                                                         "text": "${payload.longTextTemplateDataTwo.properties.textContent.primaryText.text}",
  110.                                                         "speech": "${payload.longTextTemplateDataTwo.properties.cheeseInfoSpeech}",
  111.                                                         "textAlign": "left"
  112.                                                     }
  113.                                                 ]
  114.                                             }
  115.                                         ]
  116.                                     }
  117.                                 ]
  118.                             },
  119.                             {
  120.                             "type": "Container",
  121.                             "height": "100vh",
  122.                             "items": [
  123.                                 {
  124.                                     "type": "AlexaBackground",
  125.                                     "backgroundImageSource": "${payload.longTextTemplateData.properties.backgroundImage.sources[0].url}",
  126.                                     "backgroundBlur": false,
  127.                                     "colorOverlay": true,
  128.                                     "backgroundScale": "best-fill"
  129.                                 },
  130.                                     {
  131.                                         "type": "Container",
  132.                                         "height": "100vh",
  133.                                         "width": "100vw",
  134.                                         "items": [
  135.                                             {
  136.                                                 "type": "AlexaHeader",
  137.                                                 "headerTitle": "${payload.longTextTemplateDataThree.properties.title}",
  138.                                                 "headerAttributionImage": "${payload.longTextTemplateData.properties.logoUrl}",
  139.                                                 "headerDivider": false
  140.                                             },
  141.                                             {
  142.                                                 "type": "ScrollView",
  143.                                                 "grow": 1,
  144.                                                 "paddingTop": "@spacingMedium",
  145.                                                 "paddingBottom": "${@spacing3XLarge + @spacingXSmall}",
  146.                                                 "paddingLeft": "@marginHorizontal",
  147.                                                 "paddingRight": "@marginHorizontal",
  148.                                                 "items": [
  149.                                                     {
  150.                                                         "type": "Text",
  151.                                                         "id": "CheeseContentThree",
  152.                                                         "style": "textStyleBody",
  153.                                                         "text": "${payload.longTextTemplateDataThree.properties.textContent.primaryText.text}",
  154.                                                         "speech": "${payload.longTextTemplateDataThree.properties.cheeseInfoSpeech}",
  155.                                                         "textAlign": "left"
  156.                                                     }
  157.                                                 ]
  158.                                             }
  159.                                         ]
  160.                                     
  161.                                     }
  162.                                 ]
  163.                             }
  164.             
  165.                         ]
  166.                     }
  167.                 ]
  168.             
  169.         
  170.     },
  171.     "onMount": [
  172.         {
  173.             "type": "SpeakItem",
  174.             "componentId": "CheeseContent",
  175.             "highlightMode": "line",
  176.             "align": "center"
  177.         },
  178.         {
  179.             "type": "SpeakItem",
  180.             "componentId": "CheeseContentTwo",
  181.             "highlightMode": "line",
  182.             "align": "center"
  183.         },
  184.         {
  185.             "type": "SpeakItem",
  186.             "componentId": "CheeseContentThree",
  187.             "highlightMode": "line",
  188.             "align": "center"
  189.         }
  190.     ]
  191. }
apl
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

1 Answer

Alexander Martin avatar image
Alexander Martin answered

Hi @zabbir hossain,

check this out, that might help you https://apl.ninja/aruntalkstech/5rHJhxeT

Regards,

Alex

10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.