speech-input's Introduction

speech-input

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

Use:

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

And you're done! Here's a 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)

speech-input's Issues

Does not work with bootstrap-wysihtml5 inputs

Great script, Thanks for the code. I ran into an issue when speech-input class is applied to an input that also has the "textarea_editor" class (bootstrap-wysihtml5 html editor) no text is visually appended to the input.

Enter engages mic again

when using a single input field, enter engages the mic again. Click should engage mic, enter should submit form

Train new words

First of all, this is terrific and is very helpful. But is there a way we can train new words, especially Nouns?

input field not populating on Chrome Version 97.0.4692.71 (64 bit)

It works fine on my pixel 6, but doesn't work on Desktop Chrome Version 97.0.4692.71 (64 bit).
inputEl.value = prefix + transcript;
doesn't fill the input field

Handle prefilled input value

Consider following scenario with instant-submit option enabled:

User inputs a search query and the page reloads to show search results.
On the loaded page the search field is prefilled with the current search query.
User clicks mic button to enter a new query.
Case 1: Chrome blocks device access.
- Expected behavior: nothing happens.
- Actual behavior: the auto-submit feature submits the form, and the page is reloaded.
Case 2: mic access is granted successfully.
- Expected behavior: the input is cleared before the recognition starts.
- Actual behavior: the new (recognized) query is appended to the previous one, and the search starts with the concatenation, providing incoherent results.