Master Frontend to Backend eBook Banner
Speech To Text Using HTML,CSS and JavaScript

Speech To Text Using HTML,CSS and JavaScript

Speech To Text Using HTML,CSS and JavaScript

Speech To Text Using HTML,CSS and JavaScript
Speech To Text Using HTML,CSS and JavaScript


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

<h1>Welcome To World Of Coders</h1>
<button class="button-three" id="btn" onclick="recognition.start()">
Speech To text
<div id="result" class="container">
<p>Text is show here</p>
<button class="button-three" onclick="copyDivToClipboard()">
Copy the text

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.

5+ HTML CSS Projects With Source Code



Speech To Text Using HTML,CSS and JavaScript

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;

Now we have completed our Speech To Text Styling. Here is our updated output HTML + CSS.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)



Speech To Text Using HTML,CSS and JavaScript


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;
document.getElementById("result").innerHTML = text;
function copyDivToClipboard() {
var range = document.createRange();
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
window.getSelection().removeAllRanges();// to deselect
alert("Copied the text:")

Final Output Of Speech To Text Using JavaScript


Speech To Text Using HTML,CSS and 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 

Leave a Reply