Add Speech Recognition icon to your html textbox

Wouldn’t it be nice if you could offer users where they can just speak instead of typing? Well all you need to do is to add keyword ‘x-webkit-speech’ to the existing textbox.

<input type="text" name="search" />

Try out a live demo – click the microphone icon and speak

To enable language based speech recognition add international language code to lang attribute of text box

<input lang="fr" type="text" name="search" x-webkit-speech/>

You can also set the language code at head section

<meta http-equiv='Content-Language' content='fr'/>

Currently, only Google Chrome supports the HTML speech input API and the microphone icon will be visible. For all other browser, it appears as normal text box.