Welcome to the Codewithrandom blog. In this blog, We learn how to create Speech To Text. We use HTML, CSS, and JavaScript for this Speech To Text.
I hope you enjoy our blog so let’s start with a basic Html Structure for a Speech To Text.
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>
<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>
<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 the Html Code for the Speech To Text. Now, you can see output without Css and JavaScript. then we write Css to style our project and then use JavaScript Code for Speech To Text Functionality in Project.
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;
}
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;
}
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;
}Now we have completed our Speech To Text Styling. Here is our updated output HTML + CSS.
Output
Now add javascript Code for the speech-to-text and show text in div that we speech using window.speechRecognition.
JavaScript Code 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:")
}
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:")
}
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:")
}Final Output Of Speech To Text Using JavaScript
Now we have completed our Speech To Text. Here is our updated output with Html, Css, and JavaScript. Hope you like Speech To Text. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Add To Cart Button Using CSS & JavaScript
Thank you!
In this post, we learn how to Create a Speech To Text Using 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
