Click here to Skip to main content
Click here to Skip to main content

Text to Speech in Windows Phone 7

, 23 Nov 2011
Rate this:
Please Sign up or sign in to vote.
How to use the Text to Speech API in Windows Phone 7

Introduction

This article discusses how to use Cloud-based Microsoft Translator Service in Windows phone 7 to translate text to speech.  

Background

In this article, I am going to explain how we can take the leverage of cloud to solve the problem of Text to Speech translation. It’s pretty simple to archive such kind of functionality in Windows Phone 7 using Bing API. Here I will show how we can retrieve a list of languages supported by Microsoft Translator for the Speech API and speak the user’s input text.

First of all, we must obtain a valid Bing API AppID, let's follow the below steps.

Step 1: Open the below mentioned URL to register your application, and follow the instructions to obtain a valid Bing API AppID.

1.png - Click to enlarge image

Step 2: Enter required information and obtain a valid Bing API AppID.

2.png - Click to enlarge image 

Once you register your application, now we will be moving ahead with the Windows phone 7 application developments and invoke the cloud service.

Step 3: Create a Windows phone 7 application project:

WP_001.png - Click to enlarge image

Step 4: To add web reference of the Microsoft Translator Service, we need to add a service reference to Windows Phone project. Right click the Windows Phone Project in solution explorer, and choose Add Service Reference. Please see the below pictures for the same.

WP_004.png

WP_003.png

WP_004.png

Step 5: Now add a panorama page to Windows phone 7 project.

WP_005.png - Click to enlarge image

Step 6: Create a UI as per application requirement, see below XAML code snippet. Here I have added three panorama items. 

Using the XAML Code for UI Construction

<Grid x:Name="LayoutRoot">
    <controls:Panorama Title="text to speech" Name="panoSpeech" 
           Foreground="Blue" FontFamily="Comic Sans MS">
        <!--Panorama item one-->
        <controls:PanoramaItem Header="Language(s)" 
               Foreground="Plum" FontFamily="DengXian" 
               FontSize="72">
            <StackPanel Orientation="Horizontal">
                <StackPanel.Resources>
                    <DataTemplate x:Key="LanguageTemplate">
                        <TextBlock Foreground="White" 
                           Margin="0,0,0,0" Text="{Binding Name}"  />
                    </DataTemplate>
                </StackPanel.Resources>
                    <ListBox HorizontalAlignment="Left" 
                       ItemTemplate="{StaticResource LanguageTemplate}" 
                       Margin="20,10,0,20" 
                       Name="ListLanguages" Width="441">
                    </ListBox>
            </StackPanel>
        </controls:PanoramaItem>

        <!--Panorama item two-->
        <controls:PanoramaItem Header="Speech" Foreground="Yellow">
            <StackPanel Orientation="Vertical" Margin="20,0,0,0">
                <TextBox Name="TextToSpeachText" 
                   Text="This Pavan Pareta, Microsoft Most Value able professional. 
                         He has written an application for windows phone 7" 
                   TextWrapping="Wrap" Height="350" />
                <Button Content="S p e a k" Height="90" 
                   Margin="0,30,0,0" Name="btnSpeak" 
                   Width="338" Click="btnSpeak_Click" />
            </StackPanel>
        </controls:PanoramaItem>

        <!--Panorama item three-->
        <controls:PanoramaItem Header="Speak" Foreground="Violet">
            <StackPanel Orientation="Vertical">
                <Image Height="auto" Name="image1" 
                   Stretch="None" Width="auto" 
                   Margin="50 60 80 0" Source="/speak.jpg" />
            </StackPanel>
        </controls:PanoramaItem>
    </controls:Panorama>
</Grid>

Step 7: First Panorama item used to develop for retrieving supported speech languages. To retrieve the supported language, we need to call web service method “GetLanguagesForSpeakAsync”. The GetLanguagesForSpeak method only returns the language codes, for example, en for English and fr for French, etc. See the below UI and code snippet.

WP_006.png

GetLanguagesForSpeakAsync takes two methods like AppID and object

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    try
    {
        FrameworkDispatcher.Update();
        var objTranslator = new ServiceReference1.LanguageServiceClient();
        objTranslator.GetLanguagesForSpeakCompleted += 
          new EventHandler<GetLanguagesForSpeakCompletedEventArgs>(
          translator_GetLanguagesForSpeakCompleted);
        objTranslator.GetLanguagesForSpeakAsync(AppId, objTranslator);
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message);
    }
}

void translator_GetLanguagesForSpeakCompleted(object sender, 
                GetLanguagesForSpeakCompletedEventArgs e)
{
    var objTranslator = e.UserState as ServiceReference1.LanguageServiceClient;
    objTranslator.GetLanguageNamesCompleted += 
      new EventHandler<GetLanguageNamesCompletedEventArgs>(
      translator_GetLanguageNamesCompleted);
    objTranslator.GetLanguageNamesAsync(AppId, "en", e.Result, e.Result);
}

void translator_GetLanguageNamesCompleted(object sender, 
     GetLanguageNamesCompletedEventArgs e)
{
    var codes = e.UserState as ObservableCollection<string>;
    var names = e.Result;
    var languagesData = (from code in codes
                     let cindex = codes.IndexOf(code)
                     from name in names
                     let nindex = names.IndexOf(name)
                     where cindex == nindex
                     select new TranslatorLanguage()
                     {
                         Name = name,
                         Code = code
                     }).ToArray();
    this.Dispatcher.BeginInvoke(() =>
    {
        this.ListLanguages.ItemsSource = languagesData;
    });
}

Step 8: Second Panorama item used to develop for speak text using SpeakAsync method takes four string parameters like AppId, SpeechText, SpeechLanguage, format. See the below UI and code snippet.

WP_007.png

private void btnSpeak_Click(object sender, RoutedEventArgs e)
{
    var languageCode = "en";
    var language = this.ListLanguages.SelectedItem as TranslatorLanguage;
    if (language != null)
    {
        languageCode = language.Code;
    }
    var objTranslator = new ServiceReference1.LanguageServiceClient();
    objTranslator.SpeakCompleted += translator_SpeakCompleted;
    objTranslator.SpeakAsync(AppId, this.TextToSpeachText.Text, 
                             languageCode, "audio/wav");

    panoSpeech.DefaultItem = panoSpeech.Items[(int)2];            
 }

void translator_SpeakCompleted(object sender, ServiceReference1.SpeakCompletedEventArgs e)
{
    var client = new WebClient();
    client.OpenReadCompleted += ((s, args) =>
    {
        SoundEffect se = SoundEffect.FromStream(args.Result);
        se.Play();
    });
            client.OpenReadAsync(new Uri(e.Result));
}

Step 9: Now build the application and execute it.  

WP_008.png

WP_009.png

WP_010.png

Points of Interest

FrameworkDispatcher.Update(), Bing API which allows speech to written text. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

PavanPareta
Software Developer (Senior) WmDev Technology
India India
Pavan is a Senior software developer, and has been in the industry since August 2005. He has experience in Windows Phone 7, Windows Mobile with Compact Framework, Python for S60, C#.NET, VB.NET, Windows Forms, ASP.NET, WCF, Silverlight, JavaScript and HTML.
Follow on   Twitter

Comments and Discussions

 
QuestionSpeechSynthesizer() difficulty PinmemberMember 1014337910-Jul-13 2:15 
QuestionSend it to Email Too? Pinmemberalan933-Apr-13 14:12 
QuestionHi.About Credential Of Web Service PinmemberMember 395610926-Mar-13 7:19 
QuestionText To Speech with problem PinmemberMember 86142172-Oct-12 7:56 
QuestionNew MS Translator Format PinmemberBowo Fadoju7-Aug-12 17:30 
NewsLooks like the Bing APIs are now Deprecated and thus you can't use this Pinmvp_ Kunal Chowdhury _13-Jun-12 22:13 
QuestionNeed help! Pinmemberzenith.tav13-May-12 17:55 
AnswerRe: Need help! Pinmemberrenaud_25623-May-12 12:37 
GeneralMy vote of 1 Pinmember3boddddd7-May-12 22:05 
QuestionBing APIs are deprecated. Any help PinmemberSantiago Sanchez28-Apr-12 7:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 23 Nov 2011
Article Copyright 2011 by PavanPareta
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid