How to Use HTML5 Speech Input Fields in webkit Browsers

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

Frequently Asked Questions on HTML5 Speech Input Fields

What is the HTML5 Speech Input Field and how does it work?

The HTML5 Speech Input Field is a feature that allows users to input data into a form field through speech. It uses the Web Speech API, a technology that converts spoken language into written text. This feature is particularly useful for mobile users and those with accessibility needs. To use it, you simply click on the microphone icon in the form field and start speaking. The API then transcribes your speech into text in real-time.

Is the HTML5 Speech Input Field supported by all browsers?

No, not all browsers support the HTML5 Speech Input Field. As of now, it is primarily supported by Google Chrome and partially supported by other browsers like Firefox and Safari. It’s always a good idea to check the current browser compatibility before implementing this feature.

How can I implement the HTML5 Speech Input Field in my web page?

To implement the HTML5 Speech Input Field, you need to add the ‘x-webkit-speech’ attribute to your input field. However, please note that this attribute is deprecated and may not work in future versions of browsers. It’s recommended to use the Web Speech API for a more robust and future-proof solution.

What is the Web Speech API and how does it differ from the ‘x-webkit-speech’ attribute?

The Web Speech API is a more advanced and flexible technology for speech recognition. Unlike the ‘x-webkit-speech’ attribute, which is limited to input fields, the Web Speech API can be used anywhere on your web page. It also offers more control over the speech recognition process, such as starting, stopping, and pausing the speech recognition.

How can I use the Web Speech API in my web page?

To use the Web Speech API, you need to create a new SpeechRecognition object and define its properties and event handlers. You can then start the speech recognition by calling the ‘start’ method of the SpeechRecognition object. Please refer to the Web Speech API documentation for more detailed instructions and examples.

Can I customize the appearance of the microphone icon in the HTML5 Speech Input Field?

Yes, you can customize the appearance of the microphone icon by using CSS. However, please note that the customization options may vary depending on the browser.

Can I use the HTML5 Speech Input Field for languages other than English?

Yes, the HTML5 Speech Input Field supports multiple languages. You can specify the language by setting the ‘lang’ attribute of the input field or the SpeechRecognition object.

Can I use the HTML5 Speech Input Field for voice commands?

Yes, you can use the HTML5 Speech Input Field for voice commands. However, for a more advanced and flexible voice command system, it’s recommended to use the Web Speech API.

What are the potential issues with the HTML5 Speech Input Field?

The main issues with the HTML5 Speech Input Field are browser compatibility and the deprecation of the ‘x-webkit-speech’ attribute. Also, the speech recognition may not be accurate for all languages and accents.

How can I improve the accuracy of the HTML5 Speech Input Field?

The accuracy of the HTML5 Speech Input Field depends on the underlying speech recognition technology. You can improve the accuracy by speaking clearly and using a high-quality microphone. Also, using the Web Speech API may provide better accuracy than the ‘x-webkit-speech’ attribute.