speech to text javascript | speech to text using Html css javascript code

 speech to text javascript | speech to text using Html css javascript code





speech to text javascript | speech to text using Html css javascript code



Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create speech to text javascript. We use HTML & CSS and javascript for this  speech to text javascript. Hope you enjoy our blog so let's start with a basic HTML structure for a speech to text javascript.

HTML code for speech to text 

 <body>  
   <h1>Welcome To World Of Coders</h1>  
   <button class="button-three" id="btn" onclick="recognition.start()">  
    Speech To text  
   </button>  
   <div id="result" class="container">  
    <p>Text is show here</p>  
   </div>  
   <button class="button-three" onclick="copyDivToClipboard()">  
    Copy the text  
   </button>  
  </body>  
There is all HTML code for the speech to text. Now, you can see output without CSS, then we write CSS for our speech to text.
output
speech to text javascript | speech to text using Html css javascript code

CSS Code for speech to text

 body {  
     background: #eee;  
     height: 100vh;  
     display: flex;  
     align-items: center;  
     justify-content: center;  
     flex-direction: column;  
    }  
    h1 {  
     text-align: center;  
     margin-top: 3rem;  
    }  
    .container {  
     display: flex;  
     justify-content: center;  
     height: 300px;  
     width: 500px;  
     background-color: honeydew;  
     font-size: 2rem;  
     padding: 1rem;  
     margin: 2rem;  
    }  
    /*Button Three*/  
    .button-three {  
     text-align: center;  
     cursor: pointer;  
     font-size: 24px;  
     position: relative;  
     background-color: #f39c12;  
     border: none;  
     padding: 20px;  
     width: 200px;  
     text-align: center;  
     -webkit-transition-duration: 0.4s; /* Safari */  
     transition-duration: 0.4s;  
     text-decoration: none;  
     overflow: hidden;  
    }  
    .button-three:hover {  
     background: #fff;  
     box-shadow: 0px 2px 10px 5px #97b1bf;  
     color: #000;  
    }  
    .button-three:after {  
     content: "";  
     background: #f1c40f;  
     display: block;  
     position: absolute;  
     padding-top: 300%;  
     padding-left: 350%;  
     margin-left: -20px !important;  
     margin-top: -120%;  
     opacity: 0;  
     transition: all 0.8s;  
    }  
    .button-three:active:after {  
     padding: 0;  
     margin: 0;  
     opacity: 1;  
     transition: 0s;  
    }  

Javascript project ideas with complete source code 

Now we have completed our CSS section,  Here is our updated output CSS.

output
speech to text javascript | speech to text using Html css javascript code

Now add javascript for the speech to text and show text in div!

Javascript for speech to text

 const btn = document.getElementById("btn");  
 const results = document.getElementById("result");  
 const speechRecognition = window.speechRecognition || window.webkitSpeechRecognition;  
 const recognition = new speechRecognition();  
 recognition.onstart = function(){  
   console.log("you can speek now");  
 }  
 recognition.onresult = function(event){  
   var text = event.results[0][0].transcript;  
   console.log(text);  
   document.getElementById("result").innerHTML = text;  
 }  
 function copyDivToClipboard() {  
   var range = document.createRange();  
   range.selectNode(document.getElementById("result"));  
   window.getSelection().removeAllRanges(); // clear current selection  
   window.getSelection().addRange(range); // to select text  
   document.execCommand("copy");  
   window.getSelection().removeAllRanges();// to deselect  
   alert("Copied the text:")  
 }  
output

speech to text javascript | speech to text using Html css javascript code

Check it more







Now we have completed our javascript section,  Here is our updated output with javascriptHope you like speech to text, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a speech to text 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 

Post a Comment

Previous Post Next Post