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>
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:")
}
Check it more
Now we have completed our javascript section, Here is our updated output with javascript. Hope 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.
Post a Comment