How to Use HTML5 Speech Input Fields

By Craig Buckler

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: