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. 

 

HTML Code

 

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <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>  
 </head>  
 <body>  
   <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>  
   <div class="box-container">  
    <div class="box">  
    </div>  
   </div>  
   <script src="./script.js"></script>   
 </body>  
 </html>  

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.

output

Speech To Text Javascript | Speech To Text Html Css Javascript

CSS code

 

 .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%);  
 }  

Css Updated output


Speech To Text Javascript | Speech To Text Html Css Javascript

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.stop();  
 };  
 recognition.onerror = function (event) {  
  message.textContent = "Error occurred in recognition: " + event.error;  
 };  
 document  
  .querySelector("#command-button")  
  .addEventListener("click", function () {  
   recognition.start();  
  });  

Final output

Speech To Text Javascript | Speech To Text Html Css Javascript

 

 

 
Now that we have completed our javascript section, our updated output with javascriptHope 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. 

Written by – Code With Random/Anki 

Code By – DM For Credit
Check out more…..
 

 

 

Share on:

Leave a Comment