How to Implement Speech Recognition and Transcription in JavaScript Includes Microphone Input Sample

Introducing Speech Recognition in JavaScript! How to Transcribe Audio Using a Microphone

This page explains how to perform speech recognition and transcription in JavaScript using the SpeechRecognition API.
It includes sample code that supports microphone input, allowing you to learn the basic mechanism of converting spoken audio into text directly in the browser.
Recommended for anyone who wants to integrate voice input features into their web applications.

Since speech recognition uses the microphone, a permission dialog will appear when accessing it.
Supported browsers include Edge, Chrome, Android Chrome, and iPhone Safari.
Enabling features such as “Voice Input” or Siri settings makes it easy to use on smartphones as well.

Example: Converting Microphone Input to Text

Sample Code: Converting Microphone Input to Text

<input type="button" id="recognitionStart" value="Start Speech Recognition"><br>
<textarea id="recognitionResult" cols="60" rows="20" style="overflow-y:scroll;"></textarea>

<script>
var SRecognition=null;
if(window.webkitSpeechRecognition){
  SRecognition = new window.webkitSpeechRecognition();
}else if(window.SpeechRecognition){
  SRecognition = new window.SpeechRecognition();
}

window.addEventListener("load", function(){
  if (SRecognition != null) {
    SRecognition.continuous = false;
    SRecognition.interimResults = false;
    SRecognition.lang = "en-US"; // Language for speech recognition (English, United States)

    // Event fired when speech recognition has completed
    SRecognition.addEventListener("result", function(event){
      let txt = document.getElementById("recognitionResult");
      txt.innerHTML =
        document.getElementById("recognitionResult").innerHTML +
        event.results[0][0].transcript + "\n";
      txt.scrollTop = txt.scrollHeight;
      SRecognition.stop();
    });

    // Enable the “Start Speech Recognition” button if supported
    document.getElementById("recognitionStart").addEventListener("click", function(){
      SRecognition.start();
    });

  } else {
    // Disable the “Start Speech Recognition” button if not supported
    document.getElementById("recognitionStart").setAttribute("disabled", "true");
  }
});
</script>