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=1This 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