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

SR (speech recognition) to be toggled with the button JavaScript


I want the SR (speech recognition) to be toggled with the button below. Then the autocomplete looks up the autocomplete value the user just spoke. The old way doesn't well enough work in a noisy room.

Right now with code at the mic icon turns recording on BUT the autocomplete doesn't pick up the new value in the input field.

Please adjust the code accordingly.

<script src=""></script>

<input type = "text" class = "autocomplete-2 speech-input" />

<button type="button" class="speech-btn">mic</button>

I have this code:



// on page ready ...
$(function() {

// check for support
const SR = window.SpeechRecognition || window.webkitSpeechRecognition || null;
if ( !SR ) return console.warn( 'No SpeechRecognition API support.' );

// each of the form rows...
$( '#reg > .universal' ).each( function() {

// target speech input and button inside each row
const $input = $( '.speech-input', this );
const $btn = $( '.speech-btn', this );

// auto complete when input changes
$input.on( 'change', function() {
$input.autocomplete( 'search' );

// when the button is pressed...
$btn.on( 'click', function() {

// setup the new SpeechRecognition instance
const rec = new SR();
rec.interimResults = true;
rec.lang = 'en-US';

// when speech is detected, process text and add to input
rec.addEventListener( 'result', e => {
const text = Array.from( e.results ).map( r => r[0] ).map( r => r.transcript ).join( '' );
$input.val( text ).trigger( 'change' );






Answers (0)

No answers yet.