Skip to main content

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:

  • 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…

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Integromat Tower Ad