One By One Design

Google’s Text To Speech Engine in Flash

I’m not sure how I managed to miss this, but I just happened to run across a ‘new’ (well, newish), albeit still unofficial, offering of Google today: text-to-speech. You can see what few details there are on this Techcrunch post. Basically, it just boils down to this though – you send your phrase to be spoken in a GET request like so ‘http://translate.google.com/translate_tts?tl=en&q=hello%20world’, and in return Google gives you an .mp3 formatted sound file of your phrase being spoken in some non-threatening female robot voice.

Of course loading .mp3 files into Flash is a piece of cake, so integration with the Flash platform is nothing at all. The one thing that may get you is that Flash doesn’t like to load .mp3’s across domains. A very basic serverside proxy script will get you around that easily enough though. Here’s a quick example.

This will take a String phrase and generate the URL to the Google translator for you:

package { public class GTextToSpeech { private var _language:String; public function GTextToSpeech(language:String = "en") { _language = language; } /** * Use this to get the URL of the mp3 containing the spoken words of the 'phrase' parameter * @param phrase * @return String URL to Google Text to Speech engine */ public function say(phrase:String):String { if (phrase.length > 100) throw new Error("Google currently only supports phrases less than 100 characters in length."); var qs:String = "tl=" + _language + "&q="; qs += encodeURI(phrase); return "http://translate.google.com/translate_tts?" + qs; } } }

And here’s an example of a bare minimum proxy in php:

And put it together (using the Bit-101 MinimalComps):

package { import com.bit101.components.HBox; import com.bit101.components.InputText; import com.bit101.components.PushButton; import com.bit101.components.Style; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.media.Sound; import flash.media.SoundChannel; import flash.net.URLRequest; import flash.net.URLRequestMethod; import flash.net.URLVariables; /** * quick test of Google text-to-speech tool * @author Devon O. */ [SWF(width='350', height='80', backgroundColor='#FFFFFF', frameRate='12')] public class Main extends Sprite { private var _phrase:InputText; private var _goButton:PushButton; private var _speech:Sound = new Sound(); private var _channel:SoundChannel; private var _tts:GTextToSpeech = new GTextToSpeech(); public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point initUI(); } private function initUI():void { Style.embedFonts = true; Style.BUTTON_FACE = 0x000000; var container:HBox = new HBox(this, 25, 25); _phrase = new InputText(container); _phrase.width = 200; _phrase.maxChars = 100; _goButton = new PushButton(container, 0, 0, "Speak", goHandler); } private function goHandler(event:MouseEvent):void { if (_phrase.text != "") { _goButton.enabled = false; var req:URLRequest = new URLRequest("proxy.php"); req.method = URLRequestMethod.POST; var vars:URLVariables = new URLVariables(); vars.url = _tts.say(_phrase.text); req.data = vars; _speech.load(req); _channel = _speech.play(); _channel.addEventListener(Event.SOUND_COMPLETE, soundDoneHandler); } else { _phrase.text = "Type something here, dummy."; } } private function soundDoneHandler(event:Event):void { _goButton.enabled = true; } } }

And that will give you this (just type something in the box, and hit the ‘Speak’ button. Of course, you’ll need your sound on):

[kml_flashembed publishmethod=”static” fversion=”10.0.0″ movie=”http://blog.onebyonedesign.com/wp-content/uploads/2010/05/texttospeech.swf” width=”350″ height=”80″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

According to Techcrunch, the API is currently limited to 100 character long phrases, but I haven’t actually tested that to check it’s validity. Even if that’s the case, it’s still quite a fun little toy to play with and can add a bit of dimension and accessibility to Flash apps to come.

Posted by

Post a comment

Your email address will not be published. Required fields are marked *