x-webkit-speech input and textareas

August 6th, 2011. Tagged: (x)HTML(5)

New hotness, speech input. (The demo, the demo)

You get an input:

<input>

You add an x-webkit-speech attribute

<input x-webkit-speech>

And voila!

Or if you don't have a recent Chrome version, here's what these who have a recent Chrome version see:

Nice.

Textareas

Speech inputs - gotta love them. But in textareas - you can't have them. So you can put an input and a textarea and copy over the content.

html:

<textarea id="txt"></textarea>
<input x-webkit-speech id="mike"/>

With some CSS you can remove the border, add pointy cursor, etc make it look like not an input.

#mike {
    font-size: 25px;
    width: 25px;
    height: 25px;
    cursor:pointer;
    border: none;
    position: absolute;
    margin-left: 5px;
    outline: none;
    background: transparent;
}
#txt {
    height: 150px;
    width: 150px;
}

Finally a little JavaScript to a/ unfocus the input and b/ carry over the content from the input to the textarea

var mike = document.getElementById('mike');
mike.onfocus = mike.blur;
mike.onwebkitspeechchange = function(e) {
    //console.log(e); // SpeechInputEvent
    document.getElementById('txt').value = mike.value;  
};

That's all there is. Click over to the demo.

Here's what you should see in Chrome:

You can see that console.log() there - it's definitelly worth exploring. The thing is a SpeechInputEvent type of object is passed to the handler of the onwebkitspeechchange event. This object has some interesting properties, such as the array results[] which is number of guesses what you've said and confidence (0 to 1 it seems) in the guess.

Enjoy and go ahead and add these all over the place! :)

Tell your friends about this post: Facebook, Twitter, Google+

25 Responses

  1. Just a note. This functionality sends everything the user says to Google servers to provide this functionality.

  2. oh, rly? thanks, Anthony. I see how this can be a privacy concern

  3. Saw that demo’d by Paul Irish on Fronteers last year. Hadn’t seen the JS counterpart yet, thanks!

    Sidenote: Still find it strange that they didn’t go for an syntax. Seems more logical – and in line with the others such as tel, number, email, etc. – to me.

  4. (oops, some HTML stuff got eaten in my previous comment):

    .. didn’t go for an input type="speech" syntax. Seems …

  5. Bramus, yeah, input type is what I was kinda expecting too

  6. This way seems more flexible than input type=”speech” because it puts speech as an input method up there with the keyboard, mouse and touch-screen. i.e. you can speak your input into a text, password, url, email or any other input field.

    I can see a case for input type=speech: recording voice input to a file. But in that case input type=file and the device api would probably be better.

  7. If it was an input type, then you would lose the actual type. What if you wanted to have a url input be speech enabled, and an email input? If both types were speech, you would lose the HTML5 validations.

  8. Other than Chrome does any other browser support it?

  9. [...] thanks to phpied.com for the [...]

  10. Hey Stoyan, I’m enjoying your articles. I don’t know if it’s possible, but if you’d allow me (and others) to subscribe via e-mail I’d greatly appreciate it. ;)

    I know there are feeds for readers, but I never use those. :(

  11. I have written a tutorial and published it on my blog Redacacia, on how to control a microcontroller (Picaxe), using speech recogintion and HTML5 features of Google’s Chrome 11 browser.

    You can read it all at:

    http://redacacia.wordpress.com/2011/08/28/voice-operated-internet-control-of-a-picaxe/

    Tayeb

  12. Has anyone else figured out how to use this to record the mic input to a file?

    Could you point me in a direction of how I might go about achieving this?

  13. [...] usual, this session presented by Paul Kinlan showed us the future of HTML5. I love the x-webkit-speech Chrome feature to make voice inputs that we already could see on the Madrid DevFest 2010. Paul made [...]

  14. Hi,
    Cool stuff, but how can I get the results[] into a php variable/array since at that point we are inside javascript?
    N

  15. inspiration…

    [...]x-webkit-speech input and textareas / Stoyan’s phpied.com[...]…

  16. Thanks for that. Didn’t realise how effective it is to use on a textarea, I wrote a similar article the other day @ http://wp.me/p1V1Ia-cs thanks!

  17. @Andrew:
    Does it actually make a remote request? It doesn’t show anything in the Charles HTTP Proxy or the WebKit Inspector Network tab.

  18. awsmmmm

  19. 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/

  20. Hi ! I’ve made a jQuery plugin called SpeechHelper to help manipulate speech recognition results given by the webkit speech text input.

    Though it was a good idea to share it with the coummunity.

    It’s actually text recognition from the webkit-speech input but the plugin can be attached directly to webkit speech change event. Sorry about the docs, they are in french but the code is pretty straight forward (and open source). Everyone can get it here:

    jQuery SpeechHelper

    Hope it helps some guys out there !

  21. hello,
    nice article sir, i have installed the speech webkit on my website http://www.vasaivirarproperty.in but its showing no speech heard error . can you help me on it.

    thank you .

  22. Nice post. such very useful and understand easy.

  23. How can we get this appear on chrome mobile browser?

    I do realize it is shown on the keyboard but for my purpose it would be best to show it on text area…

    Thank you so much in advance! any ideas on this would be appreciated!

    Sid

  24. this is Nice post. such very useful .

    can you give me a event or method for get recorded sound file(i.e .wav/.mp3 etc ) .

  25. However, there may be downsides to revealing a lot information.
    But, in the event you contribute for the message board with
    quality and interesting posts after that your presence
    will probably be appreciated and your links will most likely remain safe.

Leave a Reply