My son is half Filipino, so it is important to me that he learn not only English, but also Tagalog, and his birth city's dialect, Kapampangan. That said, Google's, Google Translate is an impressive language tool, and I leveraged it to create an AIR application I call "Speak to Me". I hope this AIR application encourages you, the reader, to look into the Google Translate tool, and entices you to experiment with Adobe AIR and Flex.
Here's the "Speak to Me" Adobe AIR application: SpeakToMe.air. The source code is included in the installed application. You will need to install the Adobe AIR runtime if you do not already have it installed. |
A screenshot of the application shows the UI - a TextInput to allow entering up to 100 characters of one or more words, a speaker image (click on it and the entered text will be spoken), and country flags that allow toggling the translation language as well as the spoken accent.
Another screenshot shows translation of an English sentence, "Hello and welcome to this example", to Spanish, "Hola y Bienvenidos a este ejemplo".
Tip Jar:
Main application:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="createComplete()"
height="400" width="792" viewSourceURL="srcview/index.html">
<fx:Declarations>
<mx:Glow id="glowImage" duration="1000"
alphaFrom="1.0" alphaTo="0.3"
blurXFrom="0.0" blurXTo="50.0"
blurYFrom="0.0" blurYTo="50.0"
color="0x00FF00"/>
<mx:Glow id="unglowImage" duration="1000"
alphaFrom="0.3" alphaTo="1.0"
blurXFrom="50.0" blurXTo="0.0"
blurYFrom="50.0" blurYTo="0.0"
color="0x0000FF"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import flashx.textLayout.tlf_internal;
import mx.utils.ObjectUtil;
import mx.utils.StringUtil;
private var myURL:String;
private var song:SoundChannel;
private var lang:String = "en";
private var langNum:Number = 7;
private var prevLang:String = "en";
private var percentLoaded:Number = 0;
private var soundFactory:Sound = new Sound();
private var myTimer:Timer = new Timer(3000, 0);
private function createComplete(): void {
this.status = "Accent set to English"
myURL = "http://translate.google.com/translate_tts?q=Hello from Aer ination dot info. Enter one or
more words and click the speaker icon to hear them&tl=" + lang;
var request:URLRequest = new URLRequest(myURL);
request.requestHeaders.push(new URLRequestHeader("Referer", "http://translate.google.com"));
soundFactory.addEventListener(Event.COMPLETE, completeHandler);
soundFactory.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
soundFactory.addEventListener(ProgressEvent.PROGRESS, progressHandler);
soundFactory.load(request);
song = soundFactory.play();
}
private function speakToMe(): void {
myURL = "http://translate.google.com/translate_tts?q=" + txtSpeech.text + "&tl=" + lang;
var request:URLRequest = new URLRequest(myURL);
request.requestHeaders.push(new URLRequestHeader("Referer", "http://translate.google.com"));
var soundFactory:Sound = new Sound();
soundFactory.addEventListener(Event.COMPLETE, completeHandler);
soundFactory.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
soundFactory.addEventListener(ProgressEvent.PROGRESS, progressHandler);
soundFactory.load(request);
song = soundFactory.play();
}
private function speakAccent(sIn:String): void {
myURL = "http://translate.google.com/translate_tts?q=" + sIn + "&tl=" + lang;
var request:URLRequest = new URLRequest(myURL);
request.requestHeaders.push(new URLRequestHeader("Referer", "http://translate.google.com"));
var soundFactory:Sound = new Sound();
soundFactory.addEventListener(Event.COMPLETE, completeHandler);
soundFactory.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
soundFactory.addEventListener(ProgressEvent.PROGRESS, progressHandler);
soundFactory.load(request);
song = soundFactory.play();
}
private function setLanguage(e:MouseEvent): void {
//mx.controls.Alert.show(mx.utils.ObjectUtil.toString(e.currentTarget.source));
switch(e.currentTarget.source) {
case "assets/images/USA.gif":
lang = "en"
this.status = "Accent set to English"
speakAccent("Accent set to English");
html.location = "http://www.microsofttranslator.com/m/default.aspx?SourceTextbox=" + txtSpeech.text
+ "&ddFromLanguage=" + langNum + "&ddToLanguage=7";
html.addEventListener(Event.COMPLETE, onHTMLLoadComplete);
prevLang = "en"
langNum = 8;
lbl.text = "Speak to me:";
break;
case "assets/images/Mexico.gif":
lang = "es"
this.status = "Accent configurado para español"
speakAccent("Accent configurado para español");
html.location = "http://www.microsofttranslator.com/m/default.aspx?SourceTextbox=" + txtSpeech.text
+ "&ddFromLanguage=" + langNum + "&ddToLanguage=29";
html.addEventListener(Event.COMPLETE, onHTMLLoadComplete);
prevLang = "es"
langNum = 30;
lbl.text = "Háblame:";
break;
case "assets/images/Italy.gif":
lang = "it"
this.status = "Accent insieme a Italiano"
speakAccent("Accent insieme a Italiano");
html.location = "http://www.microsofttranslator.com/m/default.aspx?SourceTextbox=" + txtSpeech.text
+ "&ddFromLanguage=" + langNum + "&ddToLanguage=17";
html.addEventListener(Event.COMPLETE, onHTMLLoadComplete);
prevLang = "it"
langNum = 18;
lbl.text = "Parla con me:";
break;
case "assets/images/Germany.gif":
lang = "de"
this.status = "Akzente setzen auf Deutsch"
speakAccent("Akzente setzen auf Deutsch");
html.location = "http://www.microsofttranslator.com/m/default.aspx?SourceTextbox=" + txtSpeech.text
+ "&ddFromLanguage=" + langNum + "&ddToLanguage=11";
html.addEventListener(Event.COMPLETE, onHTMLLoadComplete);
prevLang = "de"
langNum = 12;
lbl.text = "Sprich zu mir:";
break;
case "assets/images/France.gif":
lang = "fr"
this.status = "Accent mis au français"
speakAccent("Accent mis au français");
html.location = "http://www.microsofttranslator.com/m/default.aspx?SourceTextbox=" + txtSpeech.text
+ "&ddFromLanguage=" + langNum + "&ddToLanguage=10";
html.addEventListener(Event.COMPLETE, onHTMLLoadComplete);
prevLang = "fr"
langNum = 11;
lbl.text = "Parle-moi:";
break;
default:
lang = "en"
this.status = "Accent set to English"
speakAccent("Accent set to English");
html.location = "http://www.microsofttranslator.com/m/default.aspx?SourceTextbox=" + txtSpeech.text
+ "&ddFromLanguage=" + langNum + "&ddToLanguage=8";
html.addEventListener(Event.COMPLETE, onHTMLLoadComplete);
prevLang = "en"
langNum = 8;
lbl.text = "Speak to me:";
break;
}
}
private function onHTMLLoadComplete(ev:Event): void {
html.removeEventListener(Event.COMPLETE, onHTMLLoadComplete);
//mx.controls.Alert.show(mx.utils.ObjectUtil.toString(html2.htmlLoader.window.document.documentElement.innerHTML));
var str:String = html.htmlLoader.window.document.documentElement.innerHTML;
txtSpeech.text = myCrazyParsingScheme(str);
html.visible = true;
myTimer.addEventListener("timer", delayTimer);
// start the 4 second timer
myTimer.start();
}
private function delayTimer(event:TimerEvent): void {
myTimer.stop();
speakToMe();
}
private function myCrazyParsingScheme(str:String): String {
str = str.substr(str.search('<span class="s3">'));
var strLen:int = str.search('</span>');
str = str.substr(0, strLen);
//mx.controls.Alert.show(str);
return str = str.substr(17);
}
private function completeHandler(event:Event): void {
trace("completeHandler: " + event);
}
private function timerHandler(event:TimerEvent):void {
trace("timerHandler: " + event);
}
private function ioErrorHandler(event:Event): void {
trace("ioErrorHandler: " + event);
}
private function progressHandler(event:ProgressEvent): void {
trace("progressHandler: " + event);
}
private function countWords(txt:String):uint {
var count:uint = 0;
if (txt != null) {
txt = StringUtil.trim(txt);
if (txt.length > 0) {
count = txt.split(/\s+/g).length;
}
}
return count;
}
]]>
</fx:Script>
<s:Label id="lbl" x="86.45" y="45.9" text="Speak to me:"/>
<s:TextInput x="162.54999" y="40.9" id="txtSpeech" height="22" maxChars="100"
toolTip="{'Enter up to 100 characters of any combination of words, click the speaker icon,
and you will hear the spoken words.\n\nYou entered ' + countWords(txtSpeech.text)
+ ' words.'}" width="531"/>
<mx:Image x="698.65" y="40.35" source="assets/images/sound.png" click="speakToMe()"
buttonMode="true" useHandCursor="true" width="22" height="22"/>
<s:HGroup x="323.55" y="91.95" width="130" height="16">
<mx:Image id="imgUSA" source="assets/images/USA.gif" click="setLanguage(event)"
mouseDownEffect="{glowImage}" mouseUpEffect="{unglowImage}" buttonMode="true"
useHandCursor="true" width="21" height="15" toolTip="Click to read with an English accent."/>
<mx:Image id="imgMEX" source="assets/images/Mexico.gif" click="setLanguage(event)"
mouseDownEffect="{glowImage}" mouseUpEffect="{unglowImage}" buttonMode="true"
useHandCursor="true" width="21" height="15" toolTip="Click to read with a Spanish accent."/>
<mx:Image id="imgITA" source="assets/images/Italy.gif" click="setLanguage(event)"
mouseDownEffect="{glowImage}" mouseUpEffect="{unglowImage}" buttonMode="true"
useHandCursor="true" width="21" height="15" toolTip="Click to read with an Italian accent."/>
<mx:Image id="imgGER" source="assets/images/Germany.gif" click="setLanguage(event)"
mouseDownEffect="{glowImage}" mouseUpEffect="{unglowImage}" buttonMode="true" useHandCursor="true"
width="21" height="15" toolTip="Click to read with a German accent."/>
<mx:Image id="imgFRA" source="assets/images/France.gif" click="setLanguage(event)"
mouseDownEffect="{glowImage}" mouseUpEffect="{unglowImage}" buttonMode="true" useHandCursor="true"
width="21" height="15" toolTip="Click to read with a French accent."/>
</s:HGroup>
<mx:HTML id="html" visible="false" x="27" y="120" width="98%" height="98%"/>
</s:WindowedApplication>
|