HTML5 WebKit Speech Input

With the addition and extension of input types with HTML5 forms, one newcomer to the scene is the microphone input. This allows you to fill inputs, like a search or name field, through the use of your microphone. It is closely connected with mobile use and is currently only available on Chrome 11+ but not to worry because it shouldn’t be relied upon anyway and should, currently, only be used to enhance your forms.

The important bit is the ‘x-webkit-speech’ at the end of the input tag. The ‘speech’ attribute is also added for future support, providing they don’t change the syntax.

Demo 2

Similarly to onChange with text, onSpeechChange, and it’s WebKit equivalent, are available for detection of whether the user has finished speaking. This is a useful feature for automatically submitting forms or returning what the user has just said.

Detection

As answered by UVM on Stack Overflow, another useful trick is to be able to detect if microphone input is available in the browser being used. The JavaScript below allows to you to perform actions based on if ‘webkitSpeech’ is available.

Update 14/07/12: There’s an interesting W3C Unofficial Draft, entitled ‘Speech JavaScript API Specification‘ written by two Google Engineers in June ’12, which talks about bringing speech recognition and speech synthesis to a JavaScript API. The API “…enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms”. (Thanks @zachleat for this)

Have you used this in your projects anywhere? Let me know in the comments below.