How to Use HTML5 Speech Input Fields
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âŠ