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.

 <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

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

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

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 

Leave a Reply