INTRODUCTION : Make the browser speak

It will be fun to make the browser speak. Thanks to HTML 5 Audio element. Here we can type something in a text box and click a button to make the browser speak that word.

HTML 5 Audio

Let's create an html5 audio element using javascript.

var myAudio=document.createElement('audio');
Now we can set the source attribute for this element:
myAudio.setAttribute('src', "audio source here");
And make it play,
myAudio.play();

Why Google Translate?

When the user type something in the textbox we need to convert that text into audio format. I have selected Google Translate to do the job. It was simple to track the working of google translate service. Thanks to Chrome Web Inspector ;).

http://translate.google.com/translate_tts?ie=UTF-8&q="+our textbox data+"&tl=en&total=1
This service will return an audio file. So setting this file as the source of our audio tag will make things work.
And finally;
function talkit(){
	var word=document.getElementById('txtWord').value;
	var myAudio=document.createElement('audio');
	myAudio.setAttribute('src', "http://translate.google.com/translate_tts?ie=UTF-8&q="+word+"&tl=en&total=1");
	myAudio.play();
}
						
Simple and cool wright?

View demo View Source Code