Amazon Alexaask-sdk

Using ask-sdk / ssml-tsx with Serverless Framework to define the Alexa speech text

We can write our Alexa skill’s response by JavaScript (TypeScript). But the speech text definition is a […]

広告ここから
広告ここまで

We can write our Alexa skill’s response by JavaScript (TypeScript). But the speech text definition is a little bit difficult.

input.responseBuilder.speak([
    'Hello world!',
    'This is a example sppech content from the skill',
    'The cardinal number is  <say-as interpret-as="cardinal">12345</say-as>''
  ].join(' ')).getResponse()

-> "<speak>Hello world! This is a example sppech content from the skill The cardinal number is  <say-as interpret-as=\"cardinal\">12345</say-as></speak>"

If only using plain text, it’s OK. But is we want to use several SSML element, it’s so hard to write it.

Use ssml-tsx to write the text like React

If you can use React, we can usessml-tsx to make the speech text.

$ yarn add ssml-tsx
$ vim tsconfig.json
{
  "compilerOptions": {
    "lib": ["es2017"],
    "jsx": "react", // Put this line

And if you make Lambda function by uisng Serverless Framework. We have to update your webpack.config.js

...
module.exports = {
...
  resolve: {
    // We have to add `.tsx` file to this line.
    extensions: ['.mjs', '.json', '.ts', '.tsx'],
    symlinks: false,

Then, we can write SSML like a React JSX element.

$ vim example.tsx
/** @jsx ssml */
import ssml, { renderToString } from "ssml-tsx";

export const speak = renderToString(
    <speak>
        Hello world! This is a example sppech content from the skill .
        The cardinal number is <say-as interpret-as="cardinal">12345</say-as>
    </speak>
);

$ vim index.ts
import {speak } from './example'
input.responseBuilder.speak(speak).getResponse()

-> <speak>Hello world! This is a example sppech content from the skill . The cardinal number is <say-as interpret-as=\"cardinal\">12345</say-as></speak>"

Advanced usage

We can use variable properties like React.

// example.tsx
/** @jsx ssml */
import ssml, { renderToString, FC } from "ssml-tsx";

type GreetingComponent = FC<{name?: string}>

const WelcomeMessage: GreetingComponent = ({name}) => {
    if (!name) return <p>Hello!</p>
    return <p>Hello {name} san!</p>
}

const GreetingMessage: GreetingComponent= ({name}) => (
    <speak>
        <WelcomeMessage name={name} />
        This is a example component to use ssml-tsx.
    </speak>
)

export const getGreetingPrompt = (name?: string) => renderToString(
    <GreetingMessage name={name} />
)

// index.ts
import { getGreetingPrompt } from './example'
input.responseBuilder.speak(getGreetingPrompt('John')).getResponse()

-> "<speak><p>Hello John san!</p>This is a example component to use ssml-tsx.</speak>"

We can easy to create speech content.

Known issue (in Apr. 9)

For now, we can not use amazon:domain / amazon:effect / amazon:emotion tag by using the library.

I’ve already reported it and send a PR.

Probably it will be fixed in a few days.

Apr. 10: the issue has been resolved

The issue has been resolved. Please update it to version1.0.9 or later.

https://github.com/jubilee-works/ssml-tsx/releases/tag/v1.0.9

We can not write JSX element like <amazon:YYY>. So we have to use -<hyphen> instead of :<colon>.

eg.)<amazon-domain>, <amazon-effect>

Conclusion

ssml-tsx is awesome package for Alexa & React developer like me.

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts