Using Microsoft Translator and Speech Synthesis in Windows Phone 8 app

Microsoft Translator delivers automatic translation (Machine Translation) of a text into a specified language. It is a state-of-the-art statistical machine translation system translating between any of the supported languages, and powering millions of translations every day. This tutorial explains the usage of the Microsoft Translator API to translate user-input text, and speech synthesis to provide a spoken output of the translated language with a native voice. You will need to sign up for Microsoft Translator API in Windows Azure Marketplace before using it. I will cover everything from signing up on Windows Azure Marketplace to translating user-input text and providing a spoken output. Here are the steps:

Step 1. Create an account in Windows Azure Marketplace

You need to sign up for using Microsoft Translator API, so head over to https://datamarket.azure.com and create a new account or use an existing one. Note: While signing up be careful while choosing your country/region. If you choose Worldwide, then you won’t be able to use Translator API (It will show that it’s not available in your region). So I chose United States while signing up.

Step 2. Subscribe to the Microsoft Translator API

Visit this link to subscribe to Microsoft Translator API https://datamarket.azure.com/dataset/bing/microsofttranslator. On the right hand side of the screen, you’ll see a number of different monthly volume offers. Choose the one that meets your monthly volume usage needs. I used the free 2 million characters per month subscription offer, which you can find at the bottom of the list. You’ll then be taken to the page confirming that you’ve successfully subscribed to the service.

Step 3. Getting the developer credentials

At the bottom right of the website you will see many links. One of these reads ‘Develop’, and under it you’ll see a link that says ‘Register your Application’.

  • Select this and you’ll be taken to the screen that allows you register your application
  • Fill out the Client ID, and Name fields
  • The client secret is already filled out. Don’t change it
  • Fill out the ‘Redirect URI’ field with any valid URL that uses https, for example https://microsoft.com. This field is not used by the Microsoft Translator API
  • You can also leave the ‘Enable subdomain access’ checkbox unchecked, as Translator doesn’t use it

Remember client ID and client secret as you would need it later in the app. You will be taken to a page that lists all your applications https://datamarket.azure.com/developer/applications

Step 4. Creating the App with Visual Studio Express for Windows Phone

Launch Visual Studio and create a new project in it. Choose a Windows Phone app template, give it a name and create the project. We name our app Bing Translator. In the next step choose target platform as Windows Phone 8 or 8.1

Note: We are using Windows Phone 8.1 Silverlight app template and not a XAML app template. So some of the namespace references may not be compatible if you are not using a Silverlight app template.

Step 5. Add the XAML code for the UI of your translator app

We add a text box where the user would enter the text to be translated. For now we add three radio buttons for different language options and a translate button that handles the code to start translation. The speak button at the bottom lets the user to listen to translated text.


  Step 6. Add the IsChecked event handler for the three radio boxes When the user changes the checked radio box, we update our global variable strLngTo the identifier of that language. Step 7. Add a class AdmAccessToken at the top of MainPage.xaml.cs You’ll need to create a helper class for the access token. This class should be called ‘AdmAccessToken’

Step 8. Add the code behind for Button_Click_1 event to start text translation

The translation process involves various steps. When the Translate button is clicked, it starts the process which involves

  • Make the call to the Windows Azure Marketplace using your credentials to get an access token.
  • When you get the token, set up the call to Microsoft Translator to do the translation
  • When the call is ready, make it, and await the translation
  • When the translation is done, update the user interface

 

Clicking the translate button creates the call to the Windows Azure Marketplace to get an access token. The first part of this is to create the HTTP request.

  This sets up a function called ‘RequestStreamReady’ to be called when the HTTP Request is ready to go.

This will make the make the call to the service using an HTTP Post, and when the response comes back it will be caught by the ‘GetResponseCallback’ function.

  When the API finishes the translation, it will call back to the ‘translationReady’ callback. This reads the response from the translator API and parses the results out of it. It then updates the lblTranslatedText textblock with the results. Note that because the code is asynchronous, with all the callbacks, it doesn’t run on the UI thread, and cannot update the UI directly, so it uses the dispatcher to do so.

 

Step 9. Add the ID_CAP_SPEECH_RECOGNITION capability in your app

From the solution explorer of your app go to Properties > WMAppManifest.xml and choose capabilities tab in it. In this tab tick the ID_CAP_SPEECH_RECOGNITION capability.

 

 

Step 10. Add the code for Speak button click event handler

When the user clicks on the speak button the following happens

  • The function matches the values of strLngTo and sets the filterLanguage accordingly
  • It checks whether the selected speech language is installed
  • It the language is found, the voice is set to that language
  • Finally the text is spoken in that voice

Finally you can run the project in your emulator and see if everything works.

 

Download full project source code here,

Download full project source code Bing-Translator.zip