Simple speech input for <input>s —replaces the now defunct x-webkit-speech attribute
Switch branches/tags
Nothing to show
Clone or download

README.md

speech-input

Simple speech input for <input> and <textarea> elements — replaces the now defunct x-webkit-speech attribute

Use:

  1. Include speech-input.css and speech-input.js
  2. Add a speech-input class to your <input> or <textarea>

And you're done! Here's a demo:

speech-input demo

Extra options

Other languages

It uses the value of the lang attribute on the <html> element by default. But you can override this by specifying a lang attribute on the input fields themselves. You may then also want to customize the "Speak now" text for that language with a data-ready attribute on that field:

<input type="text" class="speech-input" lang="es" data-ready="Habla ahora">

Button size

If, for any reason, you want to change the button size, you can use the data-buttonsize attribute:

<input type="text" class="speech-input" data-buttonsize="20">

Speech time limit

By default, it will wait a full 6 seconds after you finish speaking until it stops listening. You can change this time with the data-patience attribute:

<input type="text" class="speech-input" data-patience="2">

Submit when done

If you add the data-instant-submit attribute, the form that the input is in will automatically be submitted after listening stops:

<input type="text" class="speech-input" data-instant-submit>

FAQ

Why does it keep asking me to allow the microphone?

To have the microphone permissions persist, use https: http://stackoverflow.com/a/15999940/552067

I clicked the mic button but it didn't do anything.

Make sure you're using it on an actual server — it won't work on a file:// URL. Try starting up a simple static HTTP server.

Can I use this in non-webkit browsers?

Not yet.

License (MIT)