Getting Started with Microsoft Speech Services Demo App

This is a demo project to to demonstrate the Microsoft Speech Services in different usecases. Swiss German is the focus language of this app for both recognition and synthesis.

Available Scripts

In the project directory, you can run:

npm install

Installs all dependency packages.
Wait for the installation to complete, then you are able to run the app with npm start

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Technologies Used

This app uses different cognitive services by Microsoft which are documented here.

The following are used by this app:

Area of Language

1. QnA Maker
2. Translator

Area of Speech

1. Speech Services
   • Speech-to-Text
   • Text-to-Speech

Area of Search

2. Bing News Search API

All information on how to setup the services can also be found in the respective links.

Prerequisites

To run this app with your own service resources follow the following prerequisite steps:

General

1. Create a Microsoft account Create account

2. Create an Azure Account Create account The Azure account comes with $200 in service credit that you can apply toward a paid Speech service subscription, valid for up to 30 days. Your Azure services are disabled when your credit runs out or expires at the end of the 30 days.

Setup Speech Services

Official documentation for Speech Service prerequisites

1. Create Azure Resource (Official documentation)

2. Get KEYS and LOCATION/REGION (Official documentation)

3. Enter the subscription-/resourcekey and region

   • Option 1: Paste them in the file MySpeechConfig into the DefaultSpeechConfig object
   • Option 2: Paste them in the Configuration Page, when running the app (Button at top right "Schlüssel konfigurieren")

Setup QnA Maker

Official documentation to setup QnAMaker with Sdk

1. Create a QnA Maker Resource in the Azure Portal and wait until it is deployed
2. Create a new Knowledge Base (KB) here, Official quick start quide to create KB
   • Select the same Subscription for the QnA KB as the one from the just created azure QnA resource and select the QnA Resource you just created
   • Select your KB language which you cannot change later
3. (Optional) Import our KB Questions and Answers Sheet into your KB.
4. Select Publish to create an endpoint for the KB 5. Get your KB Details by clicking the View Code button in the KBs overview and copying the the KB IDand authEndpointKey. You also need the QnA Service Name for the QnA configuration.
5. Enter the KB ID, authEndpointKey and QnA Service Name:
   • Option 1: Paste them in the file QnAConfig into the DefaultQnAConfig object
   • Option 2: Paste them in the Configuration Page, when running the app (Button at top right "Schlüssel konfigurieren")

Setup Translation Service

1. Create a Translator Resource: Official documentation

2. Copy the subscription key and

   • Option 1: Paste them in the file TranslatorConfig into the DefaultTranslatorConfig object
   • Option 2: Paste them in the Configuration Page, when running the app (Button at top right "Schlüssel konfigurieren")

Setup Bing Web Search

1. Create a Bing Search Resource, Offcial documentation
2. Copy the subscription Key and
   • Option 1: Paste them in the file BingSearchConfig into the DefaultBingSearchConfig object
   • Option 2: Paste them in the Configuration Page, when running the app (Button at top right "Schlüssel konfigurieren")

Web Search API v7 reference

Now you are ready to Rock'n'Roll!

Further Links

Cognitive Services

Language Identification

Speech translation

Text-To-Speech