Speech To Text Javascript | Speech To Text Html Css Javascript

Speech To Text Javascript | Speech To Text Html Css Javascript

Welcome to Code With Random blog. This blog teaches us how we create a Speech To Text.  We use HTML, Css, and javascript for the Speech To Text. I hope you enjoy our blog so let’s start with a basic HTML structure for the Speech To Text.


 <!DOCTYPE html>  
 <html lang="en">  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">  
   <link href="./styles.css" rel="stylesheet" type="text/css" />  
   <meta http-equiv="X-UA-Compatible" content="ie=edge">  
   <title>Move the box with your Voice</title>  
   <div class="main">  
     <button id='command-button' class="btn btn-primary">GIVE COMMAND</button><br>  
     <p class="commands">Use commands such as 'Move up', 'Move down', 'Move left', 'Move right' .</p>  
     <span id='message'></span>   
   <div class="box-container">  
    <div class="box">  
   <script src="./script.js"></script>   

There is all the HTML code for the Speech To Text. Now, you can see an output with a Speech To Text then we write javascript for the Speech To Text.


 .main {  
  width: 100%;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  flex-direction: column;  
  margin-top: 20px;  
 .box-container {  
  position: absolute;  
  width: 250px;  
  height: 250px;  
  top: 50%;  
  left: 50%;  
  margin-right: -50%;  
  transform: translate(-50%, -50%);  
  border: 1px none black;  
 .box {  
  width: 60px;  
  height: 60px;  
  border: 1px solid green;  
  background-color: green;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-right: -50%;  
  transform: translate(-50%, -50%);  

Add To Cart Button Html

Css Updated output


Javascript Code

 var message = document.querySelector("#message");  
 var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;  
 var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;  
 var grammar = "#JSGF V1.0;";  
 var recognition = new SpeechRecognition();  
 var speechRecognitionList = new SpeechGrammarList();  
 speechRecognitionList.addFromString(grammar, 1);  
 recognition.grammars = speechRecognitionList;  
 recognition.lang = "en-US";  
 recognition.interimResults = false;  
 recognition.onresult = function (event) {  
  var last = event.results.length - 1;  
  var command = event.results[last][0].transcript;  
  message.textContent = "Recognised speech: " + command;  
  let box = document.querySelector(".box");  
  var top = parseInt(window.getComputedStyle(box).getPropertyValue("top"));  
  var left = parseInt(window.getComputedStyle(box).getPropertyValue("left"));  
  if (command.toLowerCase() === "move up") {  
   box.style.top = top - 40 + "px";  
  } else if (command.toLowerCase() === "move down") {  
   box.style.top = top + 40 + "px";  
  } else if (command.toLowerCase() === "move right") {  
   box.style.left = left + 40 + "px";  
  } else if (command.toLowerCase() === "move left") {  
   box.style.left = left - 40 + "px";  
 recognition.onspeechend = function () {  
 recognition.onerror = function (event) {  
  message.textContent = "Error occurred in recognition: " + event.error;  
  .addEventListener("click", function () {  


Final output

Now that we have completed our javascript section, our updated output with javascript. Hope you like the Speech To Text. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

This post teaches us how to create a Speech To Text Template using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Html And Css Projects With Source Code

Written by – Code With Random/Anki

Code By – DM For Credit

Share on:

Leave a Comment