Speech Recognition Using JavaScript

Create Speech Recognition API Project Using JavaScript

Create Speech Recognition API Project Using JavaScript

Create Speech Recognition API Project Using JavaScript
Create Speech Recognition API Project Using JavaScript

 

Welcome To the Codewithrandom Blog. In This Blog, We Learn How To Create Speech Recognition API Project In Javascript. We Use Html, Css, And JavaScript For This Speech Recognition API Project.

Hope You Enjoy Our Blog Let’s Start With A Basic Html Structure For Speech Recognition.

Html Code For Speech Recognition API

<section>
<h1>Speech<br> Recognition</h1>
<p>Available In Chrome Only</p>
<div class="container">
<div class="texts">
</div>
</div>
</section>

There is all HTML code for Speech Recognition API Now you can see output without Css and Javascript. then we write Css For Styling Projects and Give Main Functionality using Javascript.

5+ HTML CSS Projects With Source Code

Html Code Preview

Speech Recognition Using JavaScript
Speech Recognition Using JavaScript

Css Code For Speech Recognition API

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: "Montserrat";
font-size: 20px;
}
section {
min-height: 100vh;
width: 100%;
display: flex;
align-items: flex-start;
background-color: rgb(37, 37, 37);
flex-direction: column;
padding: 50px 0;
}
section h1 {
color: rgba(255, 255, 255, 0.322);
text-align: center;
width: 100%;
font-size: 50px;
margin-bottom: 10px;
}
section p {
text-align: center;
color: rgba(255, 255, 255, 0.322);
width: 100%;
margin-bottom: 40px;
}
.container {
width: 90%;
max-width: 500px;
margin: 0 auto;
justify-content: center;
}
.texts p {
color: black;
text-align: left;
width: 100%;
background-color: white;
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
}
.texts p.replay {
text-align: right;
}
Now we complete our Speech Recognition Css Code Section. Here is our Updated output With Html and Css.
Speech Recognition Using JavaScript
Speech Recognition Using JavaScript

 

Now add SpeechRecognition API In JavaScript.

50+ Html ,Css & Javascript Projects With Source Code

JavaScript Code For Speech Recognition API

const texts = document.querySelector(".texts");
window.SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults = true;
let p = document.createElement("p");
recognition.addEventListener("result", (e) => {
texts.appendChild(p);
const text = Array.from(e.results)
.map((result) => result[0])
.map((result) => result.transcript)
.join("");
p.innerText = text;
if (e.results[0].isFinal) {
if (text.includes("how are you")) {
p = document.createElement("p");
p.classList.add("replay");
p.innerText = "I am fine";
texts.appendChild(p);
}
if (
text.includes("what's your name") ||
text.includes("what is your name")
) {
p = document.createElement("p");
p.classList.add("replay");
p.innerText = "My Name is Codewith_random";
texts.appendChild(p);
}
if (text.includes("open my YouTube")) {
p = document.createElement("p");
p.classList.add("replay");
p.innerText = "opening youtube channel";
texts.appendChild(p);
console.log("opening youtube");
window.open("https://www.youtube.com/");
}
p = document.createElement("p");
}
});
recognition.addEventListener("end", () => {
recognition.start();
});
recognition.start();

How To Create OTP Input Field Using HTML , CSS & Javascript

Final Output Of Speech Recognition API Using JavaScript

speech recognition in javascript

 

Speech Recognition Using JavaScript (Speechrecognition Project )
Speech Recognition Using JavaScript (Speechrecognition Project )

 

Speech Recognition Using JavaScript (Speechrecognition Project )
Speech Recognition Using JavaScript (Speechrecognition Project )

 

Password Strength Checker using HTML ,CSS & JavaScript

Live Preview Of SpeechRecognition API JavaScript Project

Now we complete our SpeechRecognition API Project. Here is our updated output with Html, Css, and JavaScript. I hope you like Speech Recognition API Javascript you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you.

Written by – Code With Random/Anki 



This Post Has 2 Comments

  1. Jatan Trivedi

    i have seen the code and tried to implement it, but i am facing a problem that the css you have given here is not being applied to my code. it is the same code and also i have tried to apply it internally and externally both ways. still it isn't working.please help!

  2. Anonymous

    its is not working

Leave a Reply