speech to text javascript | speech to text using Html css javascript code

Welcome🎉 to CodeTech 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

<!DOCTYPE html>

<html>

<head>

<title> Voice Typing</title>

</head>

<body>

<h1>Welcome To World Of CodeTech</h1>

Speech To text

</button>

</div>

Copy the text

</button>

</body>

</html>

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;

justify-content: center;

align-items: 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: 3rem;

}

.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;

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: -120px;

opacity: 0;

transition: all 0.8s;

}

.button-three:active:after{

padding: 0;

margin: 0;

opacity: 1;

transition: 0s;

}

Now we have completed our CSS section, Here is our updated output CSS.

output

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

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 🙏💕

speech to text javascript | speech to text using Html css javascript code