Speak to your inputs

There are 5 comments.

Note: This no longer works after Twitter API changed. I’m working on a fix.
– Click on the microphone icon. Chrome might say that your microphone isn’t working. Clicking try again usually fixes that.

Download this project on Github

You can download a stand-alone version of this demo on github and play with the code.

How does it work?

By setting one simple boolean value you can turn on speech recognition for any regular old input. It’s currently only supported in Google Chrome, but, as that’s the most widely used browser on the planet, you will be targeting a large percentage of your users.

Code


<input type="search" x-webkit-speech placeholder="Say something">

the ‘x-webkit-speech‘ part is where the magic happens.

Feature detecting speech recognition

If you need to test whether your users have this feature, then go ahead and use the following snippet:


if (document.createElement("input").webkitSpeech === undefined) {
	// x-webkit-speech isn't supported
}