Quickstart

Get up and running with Speaker Cards

Detailed Setup Video
Quick Start

Get Your Website Talking in Minutes

Your purchase includes 3 projects. The 1st is the main source code for Speaker Cards, and the 2nd is the source code for the component that communicates with AWS when synthesizing the speech for your Speaker Cards. Before you can take advantage of all the features of Speaker Cards, you need to do some basic setup. The 3rd file is a standalone JS file.

Synthesizing the Speech

It is convenient and cost effective to run speaker cards without a server. To do this, we utilize AWS.

1. Create an AWS Account

Sepaker Cards require AWS to function. Head over to AWS and setup a new account. New accounts are eligible for the free tier for 12 months!

2. Download Visual Studio Code

For the automated setup portions, we recommend installing Visual Studio Code.

3. Connect to AWS

We need to connect to AWS to set up the stuff we need for Speaker Cards to work. To do this, we'll use the AWS CLI tool. Install the AWS CLI tool by following the instructions below.

How to Download and Install the AWS CLI Tool

The   AWS Command Line Interface (CLI) is a unified tool to manage your AWS services. With just one tool to download and configure, you can control multiple AWS services from the command line and automate data-speaker-card-theme through scripts.

First you will need to   get set up with the AWS Command Line Interface. This includes setting up a user with access credentials in your AWS account.

Next, you need to   install the AWS Command Line Interface. There are specific instructions for installing on either Windows, Mac, or Linux.

Once you have installed the AWS CLI, you need to add the path the AWS CLI installation to your computer's environment variables. The CLI installs to C:\Program Files\Amazon\AWSCLI (64-bit) or C:\Program Files (x86)\Amazon\AWSCLI (32-bit). Depending on your installation, you will need to add one of these to your 'path' environment variable.

Here’s the steps to do that on Windows 10 (steps for other versions are very similar):

  1. Go to Control Panel > System and Security > System
  2. Click Advanced system settings
  3. Click Environment Variables
  4. Select PATH under ‘User Variables for …’ and click the Edit button.
  5. Click New
  6. Copy either the 32-bit or 64-bit path from above, depending on your installation type
  7. Click OK to exit the windows
Add Zip Utility

During the setup of your AWS environment, the CLI will need access to a zip utility. Windows does not include this zip utility by default. Download and extract the zip utility. You need to select the file zip300xn-64.zip. Extract it to a location of your choice and make a note of the path location. You will need to add this location to your PATH environment variable, just as you did with the AWS CLI installation path. Here are the steps again:

  1. Go to Control Panel > System and Security > System
  2. Click Advanced system settings
  3. Click Environment Variables
  4. Select PATH under ‘User Variables for …’ and click the Edit button.
  5. Click New
  6. Copy the path to the location where you extracted the zip utility
  7. Click OK to exit the windows

Configure the AWS CLI

Before our setup code can use the AWS CLI, you need to configure your account credentials. At this point, you should have installed the AWS CLI and followed the steps to setup access credentials in your account. If you did not do this, please get set up with AWS Command Line Interface. You should have created a new user and downloaded the access credentials for that user. You will need those access credentials to configure the CLI, which we will do in the next step.

Configure the AWS CLI

Locate your purchased files. Within your purchased files there is a folder named voice-suite-broker. Right click on this file and select "Open With Code". This will open the folder's contents in Visual Studio Code. Alternatively, you can open Visual Studio Code first, then navigate to this file.

This folder should now be open as a project in Visual Studio Code. From within Visual Studio Code, follow these steps:

  1. Click View > Integrated Terminal (or Ctrl `). This opens an integrated terminal within Visual Studio Code. Here we can type commands and set up our AWS environment.
  2. You should be in the voice-suite-broker root folder.
  3. While still in the Terminal, type the following command:
aws --help

If your AWS CLI installed correctly, you should see a long list of options in response to this command. If you encounter an error, re-execute the steps required to Install the AWS Command Line Interface.

At the command prompt, type: aws configure

You will be prompted for the following items:

AWS Access Key ID
Enter this value from your credentials file you downloaded earlier when you created a new user in you AWS account.
AWS Secret Access Key
Enter this value from your credentials file you downloaded earlier when you created a new user in your AWS account.
Default region name
Choose a valid region name.
Default output format
Type json for this value

4. Create a S3 Bucket to Store Audio

Speaker Cards needs a place to store the synthesized speech. S3 is the perfect place to store the audio files.

  1. Go to your account at aws.amazon.com and sign in to the console.
  2. Select S3
  3. Click Create Bucket
  4. Give the bucket a unique name
  5. Click Permissions tab
  6. Click Bucket Policy
  7. Copy and paste the following bucket policy (change the resource name to the name of your bucket). Note this policy makes the bucket containing your audio publicly accessible. Obviously, you should not store sensitive information here.


{ "Version": "2012-10-17", "Statement": [ { "Sid": "Allow Public Access to All Objects", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::your-bucket-name/*" }
5. Set up Speaker Card Infrastructure

Before you can use Speaker Cards in your Website, you need to prepare you AWS environment and configure some details. The goal here is to get Speaker Cards configured to work with your AWS environment. Once the necessary files are deployed, your website will be able to synthesize and playback lifelike speech.

You should still have the voice-suite-broker open in Visual Studio Code. If not, follow the previous steps to open this project in Visual Studio Code.

From within Visual Studio Code, follow these steps:

  1. Click View > Integrated Terminal (or Ctrl `). This opens an integrated terminal within Visual Studio Code. Here we can type commands and set up our AWS environment.
  2. You should be in the voice-suite-broker root folder.
  3. While still in the Terminal, type the following command:
npm run config [YOUR-AWS-ACCOUNT-NUMBER] [UNIQUE-CODE-BUCKET-NAME] [REGION] [YOUR-AWS-ACCESS-KEY-ID] [YOUR-AWS-SECRET-ACCESS-KEY] [SERVERLESS-API-TITLE] [SERVERLESS-FUNCTION-NAME][SERVERLESS-STACK-NAME] none none [SPEECH-BUCKET-NAME]

For example: npm run config 12345678 appeality-serverless-voice-broker-bkt us-west-2 54sdg4s5sd4d52s sdsd455s5dsd65sd6s6s6s6 speaker-card-api speaker-card-voice-broker speaker-card-cft none none websitename-speech-bucket
Parameters Explanation

AWS Account Number
Get this number from your AWS account

AWS Region
You set this value earlier when you configured the AWS CLI. Enter it again here as a parameter.

Unique Bucket Name
S3 buckets have unique names. You must choose a unique bucket name here to hold your speaker card serverless code.

AWS Access Key ID
You set this value earlier when you configured the AWS CLI. Enter it again here as a parameter.

AWS Secret Access Key
You set this value earlier when you configured the AWS CLI. Enter it again here as a parameter.

Serverless API Title
You do not need to worry about specific details here. Speaker cards will automatically set up an API for your website to use when synthesizing the audio. We need to give this API a name.

Serverless Function Name
You do not need to worry about specific details here. Speaker cards will automatically set up some code to run when synthesizing the audio. We need to give this code a name.

Serverless Stack Name
You do not need to worry about specific details here. Speaker cards will automatically set up a template for our infrastructure. We need to give this template a name.

Serverless API Key
Enter none here as shown above

Speech Bucket Name
The name of the S3 bucket that will hold your synthesized speech files. You created this bucket in the previous step.

Hit enter and ensure there are no scary errors in red.

Next, clear the Visual Studio Code terminal by typing cls and hitting enter

While still in the Terminal, type the following command: npm run setup

This command will run for about 1-2 minutes. When its done, you can close Visual Studio Code.

Make a Note of the Audio Broker URI

For the remainder of the setup, you need to be in your AWS Account console.

  1. Log into the AWS console and click the CloudFormation service icon
  2. You should see a stack named speaker-card-cft
  3. Click the checkbox next to the stack name
  4. Scroll down the page and click the Outputs tab
  5. Make a note of the the first output named ApiUrl
6. Update Permissions

We need to update permissions in AWS

  1. Go to your account at aws.amazon.com and sign in to the console.
  2. Select IAM under Security, Identity, and Compliance
  3. Click Roles
  4. Select the serverless-voice-cft-LambdaExecutionRole
  5. Click Attach Policy
  6. Add the following policies
    • AmazonS3FullAccess
    • AmazonPollyFullAccess