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

 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.
speech recognition javascript | make your own Speech Recognition App using javascript

CSS for 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.

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

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

1 Comments

  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!

    ReplyDelete

Post a Comment

Previous Post Next Post