Text to speech in windows phone 7

How to use cloud-based Microsoft Translator Service in windows phone 7 to translate text to speech.

In this article I am going to explain how we can take the leverage of cloud to solve the problem for 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, lets follow the below steps.

Step -1 Open below mentioned url to register your application. And follow the instructions to obtain a valid Bing API AppID.

http://www.bing.com/developers/appids.aspx

1

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

2

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

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 below pictures for the same.

http://api.microsofttranslator.com/V2/Soap.svc

WP_002

WP_003

WP_004

Step-5 Now adds a panorama page to windows phone 7 project.

WP_005

Step-6 creates a UI as per application requirement see below xaml code snippet. Here I have added three panorama items.

<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 proffesional. 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 Fist 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 blow UI and code snippet.

WP_006

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 below UI and code snippet.

WP_007

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 builds the application and executes it.

WP_008WP_009WP_010

Download source code here

Thank you for your time.

Advertisements

About Pavan Pareta

My name is Pavan Pareta, I enjoy computers and general technology. I am more interested in the areas of Computer Security, Programming and developing innovative s/w for Windows Mobile and Windows Phone 7. I like MS Technology and support open-source software, because I believe it plays a major role in knowledge sharing and exchange of ideas, which effectively leads to better software. Additionally, I am a follower of the KISS (Keep It Simple Stupid) philosophy. I Love C#.NET and recently I am fall in love with Silverlight :) Introduce to my machine My main workstation is a Intel Pentium Core Duo and my primary operating system is Windows 7.
This entry was posted in Mango, Windows Phone 7, Windows Phone APIs. Bookmark the permalink.

15 Responses to Text to speech in windows phone 7

  1. Cathal says:

    The source code link doesnt work, alos where do we paste the code in step 7 into?

  2. Pavan Pareta says:

    I have updated source code link.

  3. Stephen says:

    Hello Pavan,thank you for sharing this, but the link to the source code is not working.

  4. Pavan Pareta says:

    @Stephen I have amended source code link.

  5. Unknown says:

    Where does TranslatorLanguage() come from? It seems you forgot to mention that class but haven't checked your download example so unsure… ;]

  6. Lance S says:

    This comment has been removed by the author.

  7. Excellent pieces. Keep posting such kind of information on your blog. I really impressed by your blog. Android app development| Android app developer

  8. cheikh drame says:

    thanks. very useful. I was able to run it.

  9. madhuri says:

    This is one of the best blogs I have ever come across.!!!!Cheers dude !Free Ecommerce SoftwareWeb Shopping Cart

  10. Thanh Huy says:

    In TextToSpeechbecause some languages are supported to speak! Please tell me the way to know which language is support?thank you!

  11. Prem says:

    the sample code doesn't work….

  12. Pavan Pareta says:

    @Prem Make sure you are using correct API Key in your application, I have downloaded and tested twice on my machine its work very *Well* without any problem.Make sure your machine for emulator to run this app you must required Internet connection for the same and device you must have GPRS configure on your phone.please let me know if you still facing to execute this app on your end.Thanks.

  13. Prem says:

    This comment has been removed by the author.

  14. Prem says:

    Should I do any other configuraion after i get the appId…its urgent…please come on chat.

  15. hi pavan,I Have changed APPID and created appID in bing.. when i run app giving error like "ArgumentException: Invalid appId Parameter name: appId : ID=3643.V2_Soap.GetLanguagesForSpeak.CA5C58Dand even i cross checked with bing my app is enabled Any clue on this?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s