speech recognition javascript | make your own Speech Recognition App using javascript

 speech recognition javascript | make your own Speech Recognition App using javascript








Welcome🎉 to Code With Random blog in this blog we learn that how we how to create speech recognition javascript. We use HTML & CSS and javascript for this speech recognition javascript. Hope you enjoy our blog so let’s start with a basic HTML structure for speech recognition 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.

Now add javascript for speech recognition !

Javascript for speech recognition

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


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.

Written by – Code With Random/Anki 

Share on:

0 thoughts on “speech recognition javascript | make your own Speech Recognition App using javascript”

  1. 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!

    Reply

Leave a Comment