Spech To Text In HTML< CSS < JavaScript | Project Series Day - 5 | Frontend everything
 |
Hello Everyone 👋Welcome to My New Blog. Today I have made an Image Slider with the help of HTML, CSS, and Javascript | It is Project Series Day 5. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this simple speech to text step by step
Video Preview of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS and javascript, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
<div id="interim">Currently Saying: </div><br>
<div id="results">Press Start!</div>
<button id="start" onclick="start()">Start</button>
<button id="stop" onclick="stop()">Stop</button>So that was the HTML coding. Now we will code CSS
CSS 🎈( step - 2)
#results {
border: 1px solid #000;
width: 800px;
height: 200px;
margin: auto;
border-radius: 4px;
font-family: monospace;
font-size: 18px;
}
#interim {
border: 1px solid #000;
border-radius: 4px;
font-family: monospace;
font-size: 18px;
width: 800px;
margin: auto;
}
body {
text-align: center;
}
CSS coding is also done. Now let us move to JAVASCRIPT 😎
Javascript 🎈( step - 3)
var results = document.getElementById("results");
var interim = document.getElementById("interim");
var final_transcript = '';
var interim_transcript = '';
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
var start = function() {
results.innerHTML = '';
interim.innerHTML = '';
final_transcript = '';
interim_transcript = '';
recognition.start();
recognition.onresult = function(event) {
interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
results.innerHTML = final_transcript;
interim.innerHTML = "Currently Saying: " + interim_transcript;
};
};
var stop = function() {
recognition.stop();
};
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.