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.

Update: Can be used on Safari and iOS with a little objective-C (but I haven’t personally tried it).

Update 13/01/13: Apple is planning on implementing this into WebKit.

And so, without further ado, a basic demo (Best Viewed with Chrome 11+).

How it should look (if you’re using a different web browser):

Image –>

<input type="search" results="10" placeholder="Search..." x-webkit-speech speech />

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.

<input type="text"
    onspeechchange="alert("You Said: " + this.value)" 
    onwebkitspeechchange="alert("You Said: " + this.value)" 
    x-webkit-speech speech​ />

View Demo 2 on jsFiddle »{.btn.btn-primary}

Demo 3#

It is also possible to completely take away the appearance of an input and to increase the size of the microphone – which is useful depending on what you are using it for.

.speech-input
{
    color: transparent;
    background-color: transparent;
    border: 0;
    width: 15px;
    margin: 40px 36px;

    -webkit-transform: scale(3.0, 3.0);
    -moz-transform: scale(3.0, 3.0);
    -ms-transform: scale(3.0, 3.0);
    transform: scale(3.0, 3.0);
}​

View Demo 3 on jsFiddle »{.btn.btn-primary}

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.

if ( document.createElement('input').webkitSpeech == undefined )
{
    // No Speech Support
}

Conclusion#

So there we have it, a simple Flash-free way of talking to your website.

Tom Lerendu wrote a simple guide on how to implement speech into forms and there is also a good article on aakashweb which talks about simple interaction JavaScript.

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.