How to Use HTML5 Speech Input Fields

Contributing Editor

I’m lost for words. Which is a shame because I could have dictated this article directly into my browser!

The recently-released Chrome 11 has speech analysis enabled by default. If you’re using Chrome, head over to the speech input demonstration page and click the microphone button icon…

speech input

Impressed? The results will depend on your accent and what you’re saying. My attempt at “HTML5 speech input” resulted in “html fonts p chip foose”! In general, though, regularly-used English words and numbers are parsed surprisingly well given that the system isn’t trained to recognize your particular dulcet tones.

Let’s take a look at the HTML code required for speech input:

<input type="text" x-webkit-speech />

Or, if you prefer XHTML-like syntax:

<input type="text" x-webkit-speech="x-webkit-speech" />

The x-webkit-speech attribute can be used on any HTML5 input element with a type of text, number, tel, or search. Unfortunately, it’s not permitted on textarea fields. I suspect that’s to stop people using it for long dictations which could result in inaccurate results or high memory usage.

The following JavaScript code can be used to test whether speech input is enabled:


if (document.createElement("input").webkitSpeech === undefined) {
	alert("Speech input is not supported in your browser.");
}

It’s unlikely you’ll require this since browsers which don’t support speech will show a standard input field. However, you could use it before assigning an ‘onwebkitspeechchange’ event handler to run a function after speech has been processed.

Speech input is one of the most innovative browser technologies to appear in recent months. It’s easy to implement and there are several obvious uses:

  • assistive dictation for those with impaired mobility
  • an alternative input option for mobile phones and tablets, and
  • any environment where a keyboard or mouse is impractical.

I suspect we’ll see weird and wonderful use in games and educational tools.

Will you add speech input support to your application? Does Chrome understand you better than your partner? All comments welcome…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Jess

    I can envision applications for this in foreign language learning.

  • Victor Matson

    OK, I’ll bite. How do you enable it?

    • Helen Natasha Moore

      Chrome and a microphone?

      • http://www.optimalworks.net/ Craig Buckler

        Or, more specifically, Chrome 11 and a microphone. Click Chrome’s tool icon then “About Google Chrome” to check your version.

      • uddhavarote@ymail.com

        Yep…chrome and a microphone !

  • Ahmad Alfy

    IMPRESSIVE!!! WOW THIS IS AMAZING!

  • Stormrider

    I’m guessing, given the time it took to process, that the speech is uploaded analysed at Google where they can employ far more sophisticated technology than possible in a browser on a desktop PC. I’m fairly convinced that android phones do the same for speech input as well, though could be wrong.

    • http://www.optimalworks.net/ Craig Buckler

      I’m not convinced that’s the case … especially given the speed of my connection!

  • Ralph

    Hmmm, is quite buggy, but fun, all the same. I voiced “dog” and it inserted “it is dangerous to dogs”. I tried again, and it read “turn off your dog”. Weird. (It’s fun to see what happens when you say naughty words, too!)

    • http://www.optimalworks.net/ Craig Buckler

      Bizarre. The quality of your microphone, background noise and your accent will affect results. “Dog” worked for me.

  • Luke

    Not wanting to come off as a code-nazi, but you mention HTML markup, and include an XHTML-style self-close in the code.
    <input type=”text” x-webkit-speech />
    Should it not be:
    <input type=”text” x-webkit-speech>

    • http://www.optimalworks.net/ Craig Buckler

      HTML5 browsers won’t care if you include a closing slash or not. I prefer well-formed code, but it’s up to you.

  • seun

    brilliant. Does anyone know how to use this feature offline?

  • ldg

    Yes, it uses a server-side, highly sophisticated speech recognition back-end. Google has spent a lot of resources to get speech recognition to work with the Android platform ( http://developer.android.com/resources/articles/speech-input.html ), the Chrome uses a version of that service.

    HTML5 provides the interface (see: http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html ), the developer needs to provide the actual speech recognition API. I assume that Chrome uses the Google API as a default (using Charles or similar, you can see the I/O), but eventually you will be able to specify alternative services.

  • http://tutology.net Aneek

    Simply awesome.
    I found a Speech Input Field in a blog. then started to search about it. Found this one. Soon going to implement it to my website’s search.

    Thank you.

  • http://www.facebook.com/mysavijay mysa vijay

    thanks… i learnt alot…. it`s helps people who is very lazy to type…. and this helps to the people who`s pronunciation matches..