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 *