It’s been a few weeks now since I attended a Web Gaming event hosted by Mozilla and I’ve not yet had chance to write about one of the coolest features that was demonstrated: Speech input in forms. Now I must admit, I had no idea this was even possible; so it was quite a surprise when I saw the demonstration. With a few extra attributes added to a standard input box you can enable speech input:
1 | <input name="speech" id="speech" type="text" x-webkit-speech speech error onwebkitspeechchange="dosomething.coolhere(true);" /> |
It really is that simple! You may notice the “x-webkit-speech” attribute so will have guessed it currently only works in Webkit; and as far as I’m aware only in very recent versions of Google Chrome (note: “The Input Speech API will now be available by default on Chrome’s dev-channel”). The Speech API seems very new and is still a draft, so it will be a while before it’s fully adopted by other browser vendors.
A quick demonstration of the Speech API in action.
To demonstrate the speech input I’ve put together a very simple festive demo that queries the Flickr API looking for images related to a value entered. So if you have a microphone and the dev channel of Chrome, why not give it a try. Chrome records the input of the microphone before sending it off to an external server to be processed, where a value is then sent back to the browser. At first I thought it was all processed inside the browser but I guess that’s a little to much to expect! It isn’t 100% accurate and the demo accepts Googles first guess so you may get a few strange results. The server returns multiple guesses which a user can select from, but this hasn’t been added (to my demo at least).
Since the API is very new it took a little trial and error to work out how to detect if the Speech API was available in the browser; but with a little help from Paul Irish I managed to crack it:
1 2 3 4 5 | function speechcapable(){ var elem = document.createElement('input'); var support = 'onwebkitspeechchange' in elem || 'speech' in elem; return support; } |
This function will return true if the API is available. It’s worth noting that since it’s very new this function is likely to break in the future as the properties always seem to be changing. It works at the moment, so get thinking about what this brilliant new API can be used for! It’s a big plus for accessibility if used correctly and I can also see some cool applications in web gaming too. View the demo.
Thumper on February 1 11 / 31 Permalink
Tried the Demo, the Mic button mutes my array mic every time. To bad this looks useful.
Linesh Jose on September 18 11 / 260 Permalink
this a great article. I tried it in chrome, it’s worked :). But it’s not supported in firefox. Any way thanks for this article :)
vinod on October 19 11 / 291 Permalink
how its work on ie9
Matt on October 24 11 / 296 Permalink
It won’t work on IE9 as it needs to be implemented by the browser team. As far as I know Chrome (maybe Safari?) is the only browser to support this feature. I wouldn’t expect to see it in IE any time soon to be honest.
Teknia on March 22 12 / 81 Permalink
Hi, has anyone worked with defining your own grammar for this input. I tried a couple of things but without success. It seems it is just ignoring/not finding my grammar. Any more info? Thanks! N
Edd Turtle on June 27 12 / 178 Permalink
Good job on the article. I wrote a similar one the other day: http://wp.me/p1V1Ia-cs
It should work on all WebKit browsers (Chrome + Safari). @Teknia it uses the speech recognition on the google servers so I doubt you’d be able to manipulate that or add in grammar.
Jens Ahrengot Boddum on January 25 13 / 24 Permalink
This is a pretty cool feature! I put up a demo that uses x-webkit-speech to do a twitter search and display the results. Check it out if you want: http://ahrengot.com/tutorials/speak-to-your-inputs/