Table of Contents
speech recognition javascript | make your own Speech Recognition App using javascript
HTML code for speech recognition
<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 Now you can see output without CSS then we write CSS for our speech recognition.
* {
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 CSS section, Here is our updated output CSS.
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();
Now we complete our javascript section, Here is our updated output with javascript. Hope you like speech recognition javascript you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕
Check it more
javascript project ideas with source code by Code With Random
HTML – CSS project ideas by Code With Random
calculator html javascript | calculator javascript code
bootstrap navbar – responsive bootstrap navbar
notification css style | Html top bar slide down notification css
css responsive menu | CSS animated Menu
countdown timer html javascript | free countdown timer
Custom checkbox in CSS ? | Create a custom checkbox using CSS ?
In this post, we learn how to create a speech recognition javascript using with simple coding of HTML & CSS and javascript. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.
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!
its is not working