Posted onNov 27, 2020 • Originally published atblog.thewiz.net

Transcribe Speech on your Website

#javascript #speechrecognition

We all enjoy talking to Google, and requesting a search by just talking to our phone. Ever thought of doing that on your own website? To allow the user to just talk into the forms, rather than typing it out? Yes, it is possible, and quite easy to do! Check it out.

Web Speech API

The Web Speech API helps us with processing speech in the browser. Based on its implementation, the browser itself may use a cloud API, or process it within, but it is free for us, and quite efficient.

This can be useful for filling up large chunk of forms, where the person prefers to talk rather than type so much. Typically, we would have a set of text fields / text areas that are part of a form, and the person would just speak to fill in each, or some of those.

Most modern browsers support the Web Speech API. Of course, you have to forgive the IE. But, it works perfectly well on Chrome. Firefox? Well it works only if you manage to bypass all the security restrictions imposed by the browser.

Code

Excited? Without much ado, lets jump into the code. Let's start with a simple HTML, with an empty text area in it, along with a start button. On clicking the Start button, it invokes the "start()" function in the JavaScript. I am sure, the HTML is trivial for anyone reading this blog. So let us not waste time on that, and jump into the core JavaScript code.

// Instantiate the objectsconstSpeechRecognition=window.webkitSpeechRecognition;constrecognition=newSpeechRecognition();// JQuery handles to the textareaconsttextbox=$('#textbox');// The variable that holds the contents of the textarea.varcontent='';// Configure the speech recognition objectrecognition.continuous=true;// On identifying the text in speech, update the text area contentsrecognition.onresult=function(event){console.log(JSON.stringify(event));varcurrent=event.resultIndex;vartranscript=event.results[current][0].transcript;content+=transcript;textbox.val(content);};// Add any hooks you like when recognition startsrecognition.onstart=function(e){console.log(JSON.stringify(e));}// Add any hooks you like when the speech stopsrecognition.onspeechend=function(e){console.log(JSON.stringify(e));}// Add any hooks you like when there is an errorrecognition.onerror=function(event){console.log(JSON.stringify(error));if(event.error=='no-speech'){// No speech recognized}}// This function triggers the speech recognitionconststart=function(e){console.log(JSON.stringify(e));if(content.length){content+='';}recognition.start();};// The user can manually edit the text in the textarea.textbox.on('input',function(){content=$(this).val();})

This code is quite intuitive. It just instantiates an object of the SpeechRecognition API, and configures it to listen to any input from the microphone. As the user speaks into the microphone, the audio is transcribes and then the extracted text is added to the textarea.

Of course, it is not as smart as Alexa, misses some words at times. But is quite handy when filling forms - and other such automations. And of course, it is free! So make sure you use it in your next project!.

Want to see this working? Check it out live ona website that I hosted. Let me know if you like it!