--> Add Free Speech Recognition To Your Website Using HTML5! | Experience Lab - Online business creation and development guide for bloggers and startups

Add Free Speech Recognition To Your Website Using HTML5!

Every website has some sort of a text input field, which the visitors can use either to interact with the author or other visitors, or to pe...



Voice Recognition

Every website has some sort of a text input field, which the visitors can use either to interact with the author or other visitors, or to perform a search. Users can either input text in search boxes, comment fields, or contact forms. This input, of course, comes from keyboards, i.e. the 'written text' input. But don't you sometimes get the feeling that in this digital era where technology is taking giant leaps, things should be a bit automated? Automated in terms of ease-of-use for the users. Well fortunately, there is another, cooler input method you can employ to provide your blog visitors a better user-experience, and that is speech recognition, all thanks to HTML 5!





Speech recognition is great. And so is HTML 5! It gives your blog a wider range of functionality. Now, instead of typing keywords and phrases in search boxes, all the users need to do is connect their microphones to their computers, and speak the words right into it! Sounds great, huh? Well let's see how you can do that.





Adding speech input to search box




You might all be familiar with Google search boxes. Search boxes have the 'input' HTML attribute, and this is what the following piece of code support. Just copy the code below into the HTML of your website, and you'll see a search box right there!





<form method="get" action="http://www.google.com/search">

 <input type="text" name="q" size="40" x-webkit-speech />

 <input type="submit" value="Google Search" />

</form>


Try out this feature by clicking on the microphone button next to the search box below!













Adding speech input to comment fields



Comment fields are different from other input fields. For one, they don't have to go and look for something, and second, they have the 'textarea' input type. Here is the code for such kinds of fields.



<textarea name="comment_box" id="comment_box" cols="30" rows="8"> </textarea>

<input style="width:20px; height:40px; border:0px; background-color:transparent;" id="mic" onwebkitspeechchange="transcribe(this.value)" x-webkit-speech />

<script type="text/javascript">

function transcribe (words) {

   document.getElementById("comment_box").value = words;

   document.getElementById("mic").value = "";

   document.getElementById("comment_box").focus();

}

</script>

Here is the above code in action








How does it work?



When you speak into your microphone, that sound is temporarily recorded and sent to Google servers, where it is transcribed and sent back as text. The real magic is done by the 'x-webkit-speech' attribute, This attribute works with <input> type fields, as you saw in the first code snippet.





For other kinds of text fields, such as textarea, as in the second code snippet, There's a simple workaround using JavaScript. Text comes into a temporary input type field, and is then copied into the other field.


It doesn't seem to work with me, what do I do?



Well, to start with, you need to have Google Chrome to use this functionality. Currently, only Google Chrome supports the speech input HTML 5 API. So if you are not using Google Chrome, you might not see the microphone button.





Finally, you need to understand that this isn't some kind of Siri as you get in an iPhone. So it might not be as efficient. But it can come in handy. And Google is trying to improve this service. So we could expect some real improvement in the near future. Thanks for reading, and tell us what you think about this feature. And stay tuned for more such tricks :)




COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Add Free Speech Recognition To Your Website Using HTML5!
Add Free Speech Recognition To Your Website Using HTML5!
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUDN6Q_eaPwdqE7tM0G0RJANZBTheDB5oSEhnI-FWkIXNK6ePqTKedHsIy2Eg8vvrcRK2aHZEJRztxWTIuNDyyjx2pmvpTE0bId_ehmppc6a0YMk43u7DtJKoEEFBi_ufoyVkXr0ywzqYR/s200/Voice+Recognition.bmp
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUDN6Q_eaPwdqE7tM0G0RJANZBTheDB5oSEhnI-FWkIXNK6ePqTKedHsIy2Eg8vvrcRK2aHZEJRztxWTIuNDyyjx2pmvpTE0bId_ehmppc6a0YMk43u7DtJKoEEFBi_ufoyVkXr0ywzqYR/s72-c/Voice+Recognition.bmp
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2012/05/add-free-speech-recognition-to-your.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/05/add-free-speech-recognition-to-your.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy