Speech to Text facility

Websites normally contain text fields where users can input any data or information. For example, search boxes, comments form and contact form.

How to Add Speech Recognition system on your website?

And the most common practice is to use a keyboard to input any data in to these blanks.

Are you aware that there is one another cool way to offer your visitors to input data into these blanks other than keyboard?

Well! there is! That cool way is called as “Speech recognition”

How to make your website cool with an amazing Speech to Text facility ?

Simply, change the words highlighted in (red) color in the below mentioned speech code to enable (voice-based-input) facility on your website.

  1. <form method=“get” action=http://www.google.com/search>
  2. <input type=“text” name=“q” size=“30” x-webkit-speech/>
  3. <input type=“submit” value=“Google Search” />
  4. </form>

Code will be added in our Facebook group: https://web.facebook.com/groups/bloggingmadness/

This facility works by sending the recorded audio to the servers of Google, where the entire transcription process is done & than the plain and simple text is delivered.

At the moment, only (Google Chrome) is supporting (HTML-speech-input-API’s), therefore the icon of microphone will be visible for chrome users only.

Also check: Dictation – Online Speech Recognition

How to Add Speech Input in any Text based area, for example Comments section?

How to Add Speech Recognition system on your website?

Well, for that, you need to add the below mentioned code.

  1. <script type=“text/javascript”>
  2. function transcribe(words) {
  3. document.getElementById(“speech”).value = words;
  4. document.getElementById(“mic”).value = “”;
  5. document.getElementById(“speech”).focus();
  6. }
  7. </script>
  8.  
  9. <textarea cols=“50 id=“speech”></textarea>
  10. <input id=“mic”
  11. onwebkitspeechchange=transcribe(this.value) x-webkit-speech>

Code will be added in our Facebook group: https://web.facebook.com/groups/bloggingmadness/

Internally, after clicking on the icon of microphone and speaking, the text transcription will go in to the field of <input>, but the copy of that transcript will also be sent instantly to the text area.

The above mentioned trick will help you to turn your comments section or an email form into a fantabulous voice enabled system!

Don’t forget to add your valuable comments, suggestions and Subscribe us via Email.

About The Author

I am a full time blogger and a content writer as well. I try to help my readers and solve their problems related to SEO, web hosting, freelancing and other related stuff.

Leave a Reply

Your email address will not be published.

CAPTCHA

*