Before the fun begins – beware you’ll need to test this page with Chrome.

This is one of those ‘pixie fairy magic’ features that get gifted to web developers from time to time. Speech input fields let you speak to the browser (yes the browser) and it will recognise what you say and enter it in a form field. Don’t believe me try the example:

Speech Input Field Example

Impressed? Well I was and here is the code. First up you need to create a HTML input field. This can be of various types including the new HTML5 variants ie ‘text’, ‘search’, ‘number’ – anything that requires text type input. Add to this the attribute ‘speech’ as follows:

<input type="text" id="speakToMe" speech>

Now if you took a look at the code in the demo then you’ll notice that I am not quite telling the truth here. The ‘speech’ attribute is not standardised so we have to use a vendor prefix, an experimental prefix at that. So the HTML used is:

<input type="text" id="speakToMe" x-webkit-speech>

This feature is documented as a draft API by W3C. Various methods and events are suggested in this document.

The W3C draft specification indicates that <textarea> elements should work with the ‘speech’ attribute but from my experiments this doesn’t seem to have been added to Chrome just yet (April 2012).

Speech Input Methods

The following methods are available to the speech input API.

Starts a a new speech input session.
Stops the speech input session.
Cancels the speech input session

Speech Input Events

The following events can be associated with speech input fields.

Dispatched when audio capture session starts
speech start

Dispatched when the active speech input session detects that the user has started speaking.
The speechchange event is dispatched when a set of complete and valid utterances have been recognized. This event bubbles. A complete utterance ends when the implementation detects end-of-speech or if the stopSpeechInput() method was invoked.
Dispatched when the active speech input session detects that the user has stopped speaking.

To experiment with these in Chrome use the webkit vendor prefix ie:

<input type="text" id="speakToMe" onwebkitspeechchange="checkName();" x-webkit-speech />

Speak up I didn’t hear you.

Leave a Comment