index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background:black">
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript">

function translator()
{
	var from = "en";
	var to = document.getElementById("language").value;
	var text = document.getElementById("speech_input").value;
	document.getElementById("input_text").innerHTML = text;

	var s = document.createElement("script");
	s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate" +
		"?appId=" +  "8B841CA7C1A03443682C52AD07B7775A7BD5B3AA"  +
		"&from=" + encodeURIComponent(from) +
		"&to=" + encodeURIComponent(to) +
		"&text=" + encodeURIComponent(text) +
		"&oncomplete=mycallback";
	document.body.appendChild(s);
}

function mycallback(response)
{
	document.getElementById("output_text").innerHTML = response;
	var fromLang = document.getElementById("language").value
	if (fromLang == "zh-CHS") {
	fromLang = "zh-CN"
	}
	if (fromLang == "zh-CHT") {
	fromLang = "zh-TW"
	}
	playme(	response,fromLang);
}
function playme(speech, toLang) {
	var req = "http://translate.google.com/translate_tts?ie=UTF-8&tl="
	req+=toLang
	req+="&q="
	req += speech
	document.getElementById('audioFrame').src = req
	}
</script>
	<input type="text" autocomplete="off" name="username" onwebkitspeechchange="translator()" id="speech_input" x-webkit-speech />
	<select id="language" name="language">
	  <option value="ar">Arabic</option>
	  <option value="ca">Catalan</option>
	  <option value="zh-CHS">Chinese (Simplified)</option>
	  <option value="zh-CHT">Chinese (Traditional)</option>
	  <option value="cs">Czech</option>
	  <option value="da">Danish</option>
	  <option value="nl">Dutch</option>
	  <option value="en">English</option>
	  <option value="fi">Finnish</option>
	  <option value="fr">French</option>
	  <option value="de">German</option>
	  <option value="el">Greek</option>
	  <option value="ht">Haitian Creole</option>
	  <option value="hi">Hindi</option>
	  <option value="hu">Hungarian</option>
	  <option value="it">Italian</option>
	  <option value="ja">Japanese</option>
	  <option value="ko">Korean</option>
	  <option value="lv">Latvian</option>
	  <option value="no">Norwegian</option>
	  <option value="pl">Polish</option>
	  <option value="pt">Portuguese</option>
	  <option value="ro">Romanian</option>
	  <option value="ru">Russian</option>
	  <option value="sk">Slovak</option>
	  <option value="es">Spanish</option>
	  <option value="sv">Swedish</option>
	  <option value="th">Thai</option>
	  <option value="tr">Turkish</option>
	  <option value="vi">Vietnamese</option>
	</select>

<div id="input_text"> </div>
<div id="output_text"> </div>
<iframe style="display:none" id="audioFrame" ></iframe>
<div id="about">
The app on the left only works with Google Chrome.
If you don't have a copy of Chrome, I'd highly reccomend you get one <a href="http://www.google.com/chrome/" target="_blank">here.</a>
To use this app, select a language, and click the microphone.
Say anything in english, and it will appear in the language of your choice in the bottom box.
What's more, you'll be able to  hear it said out loud.
<p/>
&#169 Abhinav Vadrevu 2012
<a href="http://www.abhinavvadrevu.com">abhinavvadrevu.com</a>
</div>


</body>
</html>