How to: Add the Bing Speech Recognition Control to an application with the SpeechRecognizerUx class

Article
07/05/2016

This document describes how to implement speech recognition with the Bing Speech Recognition Control by using a SpeechRecognizerUx control and a microphone button.

Prerequisites for Speech Recognition in Windows Store applications

Before creating speech-enabled applications, you must install the speech control from Visual Studio Gallery or from the Visual Studio Extension Manager, as described in How to: Register and install the Bing Speech Recognition Control. Then, for each project that will use the Speech control, you must complete the preparatory steps described in How to: Enable a project for the Bing Speech Recognition Control.

Adding Speech Recognition to an application with the SpeechRecognizerUx control

The SpeechRecognizerUx control appears in response to the SpeechRecognizer.RecognizeSpeechToTextAsync() method method, and hides when the SpeechRecognizer.RequestCancelOperation() method is called. It includes a button to either send audio for interpretation or cancel the process, a volume meter to show input audio levels, and a tip rotator to show Tips from the developer.

To create the controls

From MainPage.xaml or default.html, add a SpeechRecognizerUx control, and then add a TextBlock or div to receive result text, as shown in the following example.

<sp:SpeechRecognizerUx x:Name="SpeechControl" />
<TextBlock x:Name="ResultText" />

<div id="SpeechControl" 
    data-win-control="BingWinJS.SpeechRecognizerUx"></div>
<div id="ResultText"></div>

If your application uses XAML and only targets Windows 8.1 or higher, create an AppBarButton element, as shown in the following example.
```
<AppBarButton x:Name="SpeakButton" Icon="Microphone" 
    Click="SpeakButton_Click"></AppBarButton>
```
If your application uses XAML and targets Windows 8:
1. From Solution Explorer, expand the Common folder and open StandardStyles.xaml.
2. About two thirds of the way down the file, find the commented <Style> element with a x:Key attribute of "MicrophoneAppBarButtonStyle".
  
  Uncomment the <Style> element, then save and close the file.
3. Define your button in MainPage.xaml as follows:
```
<Button x:Name="SpeakButton" 
    Style="{StaticResource MicrophoneAppBarButtonStyle}" 
    AutomationProperties.Name=""></Button>
```
  The AutomationProperties.Name attribute sets a caption on the button.
If your application uses HTML and JavaScript, define your button as a <DIV> element, using the character code  to specify a microphone, as shown in the following example.
```
<div id="SpeakButton" style="font-size:30pt" 
    onClick="speakButton_Click();">&#xe1d6;</div>
```

To configure the code

From MainPage.xaml.cs or default.html, create and initialize a SpeechRecognizer instance. For the list of currently supported languages, see The Bing Speech Recognition Control.

public MainPage()
{
    this.InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

SpeechRecognizer SR;
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    var credentials = new SpeechAuthorizationParameters();
    credentials.ClientId = "YOUR CLIENT ID HERE";
    credentials.ClientSecret = "YOUR CLIENT SECRET HERE";
    SR = new SpeechRecognizer("en-US", credentials);
}

function Body_OnLoad() {
    var credentials = new Bing.Speech.SpeechAuthorizationParameters();
    credentials.clientId = "YOUR CLIENT ID HERE";
    credentials.clientSecret = "YOUR CLIENT SECRET HERE";
    var SR = new SpeechRecognizer("en-US", credentials);
}

If this is a JavaScript application, you must also activate the Speech Control in WinJS to get access to its properties and methods.

WinJS.UI.process(speechControl);

(Optional) Populate the SpeechRecognizerUx.Tips array.

SpeechControl.Tips = new string[]
{
    "For more accurate results, try using a headset microphone.",
    "Speak with a consistent volume.",
    "Speak in a natural rhythm with clear consonants.",
    "Speak with a slow to moderate tempo.",
    "Background noise may interfere with accurate speech recognition."
};

document.getElementById('SpeechControl').winControl.tips = new Array(
    "For more accurate results, try using a headset microphone.",
    "Speak with a consistent volume.",
    "Speak in a natural rhythm with clear consonants.",
    "Speak with a slow to moderate tempo.",
    "Background noise may interfere with accurate speech recognition."
    );

If your application will respond to specific keywords, phrases, or syntax, you should include that information here. Your Tips content can also include general guidance about your application, or about working with speech recognition. For more information, see Working with Tips in the Bing Speech Recognition Control.

Bind the SpeechRecognizerUx control to the SpeechRecognizer.
```
SpeechControl.SpeechRecognizer = SR;
```
```
document.getElementById('SpeechControl').winControl.speechRecognizer = SR;
```
Warning

In C#/XAML applications, you can bind the control once in the Page Load event, but in JavaScript you must bind the control in every function that will call RecognizeSpeechToTextAsync().
In the click event handler for the microphone button, add a call to the RecognizeSpeechToTextAsync() method, and then write the returned text to ResultText.
```
private async void SpeakButton_Click(object sender, RoutedEventArgs e)
{
    try
    {
        var result = await SR.RecognizeSpeechToTextAsync();
        ResultText.Text = result.Text;
    }
    catch (Exception)
    {
        // Put error handling here.
    }
}
```
```
function SpeakButton_Click() {
    document.getElementById('SpeechControl').winControl.speechRecognizer = SR;
    SR.recognizeSpeechToTextAsync()
            .then(
                function (result) {
                    if (typeof (result.text) == "string") { 
                        document.getElementById('ResultText').innerHTML = result.text;
                    }
                    else {
                        // Handle quiet or unclear speech here.
                    }
                },
                function (error) {
                    // Put error handling here.
                })
}
```
Calling RecognizeSpeechToTextAsync starts the speech recognition session and makes the SpeechRecognizerUx control active. The method returns a SpeechRecognitionResult object, which contains the identified text along with the TextConfidence property and access to the GetAlternates(int) method.

The complete code described here is available in the SpeechRecognizerUx control documentation.

Caution

When collecting speech results or intermediate results in a JavaScript application, quiet or unclear speech may cause the recognizeSpeechToTextAsync() method to return an error object in place of result.text. To maintain smooth program flow, verify that result.text is a string before attempting to read it. For more information, see How to: Add the Bing Speech Recognition Control to an application with a custom UI.

Next steps

You now have an application that can recognize user speech and display the result in a TextBlock. To do more with the result, such as assessing TextConfidence, or making the Alternates list available, see Handling Bing Speech Recognition data. To use speech recognition with a custom UI instead of the SpeechRecognizerUx control, see How to: Add the Bing Speech Recognition Control to an application with a custom UI.

Share via