Simple speech input for <input> and <textarea> elements — replaces the now defunct x-webkit-speech attribute
- Include speech-input.css and speech-input.js
- Add a
speech-inputclass to your<input>or<textarea>
And you're done! Here's a demo:
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">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">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">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>To have the microphone permissions persist, use https: http://stackoverflow.com/a/15999940/552067
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.