Voice to Text with JavaScript || Voice Form filling with JS

In this article, we will make an input field <input> and fill that input field by voice, by speech recognition.

All with pure JavaScript, no external JavaScript library used.

Its more easier than you think.

step 1: At `index.html` make `button` and `input field`.

<p>I’m Aakash1282,<br> Are you lazy, here is voice writer for your</p>

<p><button type=”button” onclick=”SpeechRecog()”>Write By Voice</button> &nbsp; <span id=”action”></span></p>

<input type=”text” id=”output”>

Step 2: Use the code new SpeechRecognition() as like we create new Array() in JavaScript.

Here is the full JS code to fill above input field with voice:-

/* JS comes here */
function SpeechRecog() {
var output = document.getElementById(“output”);
var action = document.getElementById(“action”);
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var recognition = new SpeechRecognition();

// This runs when the speech recognition service starts
recognition.onstart = function() {
action.innerHTML = “<small>listening, please speak…</small>”;
};

recognition.onspeechend = function() {
action.innerHTML = “<small>stopped listening, hope you are done…</small>”;
recognition.stop();
}

// This runs when the speech recognition service returns result
recognition.onresult = function(event) {
var transcript = event.results[0][0].transcript;
var confidence = event.results[0][0].confidence;
output.value=transcript;
};

// start recognition
recognition.start();
}

Step 3 : (Optional) At style.css .Style the button and input field

button{
color:white;
background:blue;
border:none;
padding:10px;margin:5px;
border-radius:1em;
}
input{
padding:.5em;margin:.5em;
}

Working/Running code:

This can be used for form filling, docs writing and further upgraded to make animations and bots by voice alone.

For more practice you can make projects like these with voice recognition feature of JavaScript / typescript:-

  1. Write eBook/doc : this feature is already available in many websites like Google docs. you can use it for your own website
  2. Write answers : websites like Quora, Medium, Stack Overflow can use this technique.
  3. Also if you are making android/IOS app with JS (e.g.- React) than it will be a good feature of most of the apps you make.

Hope this help.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store