Ask your JavaScript questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

add speech synthesis to input fields in chrome JavaScript

  • SOLVED

I would like to add speech synthesis in chrome to my website https/verlager.com/cccr to an input fields (x64).

I want to click on the mic in the input filed and have it type the text in the input. Automatically stop after pause, I guess.

I think we should use:

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>

But maybe https://ourcodeworld.com/articles/read/163/top-7-best-voice-commands-and-speech-recognition-related-javascript-libraries has better prospects.

<input x-webkit-speech type = "text" id = "P1" onblur="calcEntryFee(this);" maxlength = "27" name = "Player_Name" class = "autocomplete-2 text person " />

<input x-webkit-speech type = "text" id = "P2" onblur="calcEntryFee(this);" maxlength = "27" name = "Player_Name" class = "autocomplete-2 text person " />

Answers (2)

2019-09-09

Rainner Lins answers:

So, you want the user to type in the input by speaking into the mic, correct? That's speech recognition, let me put something together using the native Web Speech API.


Rainner Lins comments:

Here you go, only tested in chrome but seems to be working.

https://jsfiddle.net/rainnerlins/axt2d5ef/


User180435 comments:

A few problems.... The button code boluxes up the form, so please change the button to onfocus so the recording begins when I click on the first input field. Also the code you supplied fills out EVERY field on the row, instead I just want the first field to have the speech input. Otherwise it works!


Rainner Lins comments:

https://jsfiddle.net/rainnerlins/z1hjcytx/

You can change the CSS selectors in the JS code to target the correct elements on your form. I created two classes there, .speech-input and .speech-btn for each row, so it targets the correct input. The comments I left should help.

2019-09-09

Arnav Joy answers:

do you have any reference where I can see the same thing happening?


User180435 comments:

https://github.com/TalAter/annyang/ or https://www.talater.com/annyang/