Follow us on Facebook

How to Add Speech Recognition to your Website

our website pages probably contain a few text fields that require user input. For instance, your site may have a search box where people type in search queries, a comment form (commonly found in blogs) while some sites have a contact form that visitors can use to quickly send a message to the author /webmaster.

The visitors to your website currently need to use the keyboard to enter text in the various input fields but wouldn’t it be nice if you could also offer them an alternate form of input where they can just speak instead of typing?
Well all you need to do is add an extra word – highlighted in red – to your existing search code and your site will able to accept voice based input.

Add Speech Input to your Search Box

  1. <form method="get" action="">
  2. <input type="text" name="q" size="30" x-webkit-speech/>
  3. <input type="submit" value="Google Search" />
  4. </form>
Live demo – click the microphone icon and speak

You may also find a live speech-enabled search box on the site’s homepage. When you are done speaking, the audio is sent to Google servers where it gets transcribed and delivered as plain text.
Currently, only Google Chrome supports the HTML speech input API and thus, the microphone icon will only be visible to users who are accessing your site through Chrome. If they are using a different browser, they’ll see the standard search box.
The speech input attribute that does all the magic – x-webkit-speech – works with <input> fields only but there’s an easy workaround that will help you enable voice support for any other text field the <textarea> tag.
Also see: Dictation – Online Speech Recognition

Add Speech Input to any Textarea like Comment Forms

Speech Input for textarea – click the microphone & talk

The code looks something like this:
  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>
  9. <textarea cols="50" id="speech"></textarea>
  10. <input id="mic"
  11. onwebkitspeechchange="transcribe(this.value)" x-webkit-speech>
Share on Google Plus

About Naresh Sahu

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment


Post a Comment

Blog Archive