Speech Recognition icon to your html textbox

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.

24 thoughts on “Add Speech Recognition icon to your html textbox”

  1. I want to personally thank you for the outstanding presentation. It was by far the best I have ever received. The enthusiasm you generate is contagious. Dick F.

  2. Hi my family member! I want to say that this post is amazing,
    great written and come with almost all significant infos.
    I’d like to see extra posts like this .

  3. I don’t even know how I ended up here, but I thought this
    post was great. I don’t know who you are but definitely you’re
    going to a famous blogger if you are not already 😉 Cheers!

  4. Hello there, There’s no doubt that your website might be having browser compatibility issues.
    Whenever I look at your blog in Safari, it looks fine however, if opening in Internet Explorer, it’s got some overlapping issues.
    I simply wanted to provide you with a quick heads up!
    Other than that, great blog!

  5. An outstanding share! I’ve just forwarded this onto a
    friend who has been conducting a little homework on this.
    And he in fact ordered me dinner because I found it for him…
    lol. So allow me to reword this…. Thank YOU for the meal!!
    But yeah, thanks for spending some time to discuss this subject here on your website.

  6. Thanks for finally writing about >Add Speech Recognition icon to your html textbox
    | Geek Philip <Loved it!

  7. After looking into a handful of the blog articles on your web
    page, I honestly like your technique of writing a blog.
    I added it to my bookmark webpage list and will be checking back in the near future.
    Please check out my website too and let me know how
    you feel.

  8. You ought to take part in a contest for one of the highest quality websites on the net.
    I most certainly will highly recommend this blog!

  9. Thank you for sharing your thoughts. I truly appreciate your efforts and I
    will be waiting for your next write ups thank you once again.

  10. What’s up friends, pleasant post and nice urging commented at this place,
    I am genuinely enjoying by these.

  11. Hey! This is my first visit to your blog! We are a group
    of volunteers and starting a new initiative
    in a community in the same niche. Your blog provided us
    beneficial information to work on. You have done a wonderful job!

  12. I enjoy, result in I discovered exactly what I was
    having a look for. You have ended my 4 day lengthy hunt!
    God Bless you man. Have a great day. Bye

Leave a Reply

Your email address will not be published.