Text To Speech in Windows Phone

Ibrahim Ersoy

11 Comments

Join the conversation! Your thoughts help the community grow.

Ibrahim Ersoy13y ago
@Sam: Thank you! Yes according to the article we can use HTML5 in internet explorer at Mango update.i didnt know that.But playing a sound from a webbrowser control would be a bad idea.
Ibrahim Ersoy13y ago
your welcome yusuf!
Yusuf Karatoprak13y ago
Good job ibo !
Sam Hobbs13y ago
Does http://msdn.microsoft.com/en-us/windowsmobile/hh369944.aspx help? It is called "How Do I: Use HTML5 in the WebBrowser Control in Windows Phone ´Mango´?". Also, for Desktop PCs at least we need to specify that a web page uses IE9 features.
Mahesh Chand13y ago
Got it.
Ibrahim Ersoy13y ago
Since Windows Phone 8-specific apps wont work in Windows Phone 7 devices,building WP7 apps would be your option.WP7 apps works on both devices.
Ibrahim Ersoy13y agoedited
in Windows Phone 8 SDK there is a namespace "Windows.Phone.Speech.Synthesizer" and inside this namespace there is a method "SpeakTextAsync" which does the same job i did above.But its only in Windows Phone 8 SDK.Previous one,WP7 SDK doesnt have a speech api like that.Thats why we have to use a Speech Engine like Bing or Google.Since Pavan explained using Bing Speech API here: http://www.c-sharpcorner.com/UploadFile/pavanpareta/text-to-speech-in-windows-phone-7/ i tried to explain the Google's own TTS Engine.Since Silverlight/WPF on Desktop/Web and Silverlight in Windows Phone are different versions,im quite sure a very sandboxed lighweight platform like WP7 cannot have a speech api built-in except for the "Microsoft TellMe".But then again you cant access "TellMe" using code either.Only Lync and Kinect support for Developers.This article targets both Windows Phone 7 and 8 developers :)
Mahesh Chand13y ago
OK, here is an article http://www.adambenoit.com/applications/text-speech-windows-phone-8/ Looks like it is using same class we have in WPF.
Mahesh Chand13y ago
OK that sounds like a trick. But doesn't Windows Phone (XAML) has TTS and SR API? I know WPF and XAML has speech API.
Ibrahim Ersoy13y ago
Your welcome :)
Yad13y ago
This is so cool Thanks!

Alright, as you may very well know, you can translate any word using Google Translate. But Google has a secret weapon; a builtin Google Translate.

Normally, you can listen to text spoken using the web page here: http://translate.google.com/translate_tts?tl=en&q=HelloWorld

When you view this webpage, you will see a HTML 5 video tag.

If you've tried to use this webpage in a WebBrowser control, this trick won't work. I am also pretty sure that the Internet Explorer in WP7 doesn't support HTML5.

Let's get back to our topic. When you open that website you'll see a video player:

If you're using Google Chrome, when you right-click on that control and click "inspect element" then this is where the Developer Tools will display now.

See the HTML tag there:

It has a source with a type "audio/mpeg" that means we don't need a Webbrowser.

All we need is : MediaElement!

Before we start coding, my page looks like this:

And its XAML:

<Grid x:Name="LayoutRoot" Background="Transparent">
<TextBlock HorizontalAlignment="Left" Margin="109,74,0,0" TextWrapping="Wrap" 
Text="Text To Speech" VerticalAlignment="Top" FontSize="36"/>
<TextBox x:Name="txt1" HorizontalAlignment="Left" Height="72" Margin="10,184,0,0" 
TextWrapping="Wrap" VerticalAlignment="Top" Width="460"/>
<Button Content="Speak!" HorizontalAlignment="Left" Margin="169,256,0,0"
 VerticalAlignment="Top" Click="Button_Click_1"/>
<MediaElement x:Name="med1" HorizontalAlignment="Left" Height="248" 
Margin="10,354,0,0" VerticalAlignment="Top" Width="460"/>
</Grid>

First add a static variable to store the page URL:

public static string path = "http://translate.google.com/translate_tts?tl=en&q=";

Then in a button click event write these:

med1.Source=new Uri(path + txt1.Text);
med1.Play();

Now run it!

Enter something into your Textbox then click the "Speak!" button.

Everything will be working fine.

Hope that helps!