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

Bing
 

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

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.

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

  1. 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.

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

  2. If your application uses XAML and only targets Windows 8.1 or higher, create an AppBarButton element, as shown in the following example.

    XAML
    Copy 
    <AppBarButton x:Name="SpeakButton" Icon="Microphone" 
    Click="SpeakButton_Click"></AppBarButton>

  3. 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:

      XAML
      Copy 
      <Button x:Name="SpeakButton" 
    Style="{StaticResource MicrophoneAppBarButtonStyle}" 
    AutomationProperties.Name=""></Button>

      The AutomationProperties.Name attribute sets a caption on the button.

  4. If your application uses HTML and JavaScript, define your button as a <DIV> element, using the character code &#xe1d6; to specify a microphone, as shown in the following example.

    HTML
    Copy 
    <div id="SpeakButton" style="font-size:30pt" 
    onClick="speakButton_Click();">&#xe1d6;</div>

To configure the code

  1. 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.

    JavaScript
    C#
    VB
    Copy
    No code example is currently available or this language may not be supported.

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

    JavaScript
    Copy 
    WinJS.UI.process(speechControl);

  2. (Optional) Populate the SpeechRecognizerUx.Tips array.

    JavaScript
    C#
    VB
    Copy
    No code example is currently available or this language may not be supported.

    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.

  3. Bind the SpeechRecognizerUx control to the SpeechRecognizer.

    JavaScript
    C#
    VB
    Copy
    No code example is currently available or this language may not be supported.
    System_CAPS_warningWarning

    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().

  4. In the click event handler for the microphone button, add a call to the RecognizeSpeechToTextAsync() method, and then write the returned text to ResultText.

    JavaScript
    C#
    VB
    Copy
    No code example is currently available or this language may not be supported.

    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.

    System_CAPS_cautionCaution

    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.

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.

Show: