Merge pull request #800 from vasudhawaman/gh-pages

Added Speech recognition using Web speech API

Author: sanjay-kv

index.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="styles/modal.css">
     <link rel="stylesheet" href="styles/styles.css" />
     <link rel="stylesheet" href="styles/pagination.css" />
+    <link rel="stylesheet" href="styles/speech.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
     <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-database.js"></script>
@@ -131,7 +132,29 @@ <h1 class="main-heading">Awesome GitHub Profile READMEs</h1>
           class="search-input"
           placeholder="Search Nickname or Username..."
         />
-        <i class="fas fa-search" ></i>
+        
+          
+        <i class="fas fa-search" style="position: relative;right: 40px;"></i>
+        <button class="mic-button">
+           <i class="fa fa-microphone"></i> 
+          <svg id="animated-voice" width="1rem" height="1rem" viewBox="0 0 100 100">
+            <g stroke="#fff" stroke-width="15">
+              <path d="M20,20 20,80">
+                <animate attributeName="d" values="M20,40 20,60;M20,20 20,80;M20,40 20,60" dur="1s" repeatCount="indefinite" />
+              </path>
+              <path d="M50,10 50,90">
+                <animate attributeName="d" values="M50,10 50,90;M50,40 50,60;M50,10 50,90" dur="1s" repeatCount="indefinite" />
+              </path>
+              <path d="M80,20 80,80">
+                <animate attributeName="d" values="M80,40 80,60;M80,20 80,80;M80,40 80,60" dur="1s" repeatCount="indefinite" />
+              </path>
+            </g>
+          </svg>
+        
+        </button>
+        
+        
+        
         <i class="fa-solid fa-caret-down dropdown" id="caret-down"></i>
       </div>
       <!-- Modal Structure -->
@@ -234,6 +257,7 @@ <h2>Join the Recode Hive Community</h2>
     <script src="scripts/dark-mode.js"></script>
     <script src="scripts/hamburger.js"></script>
     <script src="scripts/revealelementsonscroll.js"></script>
+    <script src="scripts/speechRecognition.js"></script>
     <!-- Added script for new Twitter logo -->
     <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
 

scripts/retriveprofile.js

@@ -230,8 +230,13 @@ document.addEventListener("DOMContentLoaded", function () {
   searchBar.addEventListener("input", () => {
     renderProfiles(searchBar.value);
   });
+  searchBar.addEventListener("click", () => {
+    renderProfiles(searchBar.value);
+  });
 });
 
+
+
 document.addEventListener("mouseover", function (e) {
   if (e.target.tagName === "IMG" && e.target.closest(".scroll-on-hover")) {
     const imgContainer = e.target.closest(".img-container");

scripts/speechRecognition.js

@@ -0,0 +1,59 @@
+
+function startSearch() {
+    // get main elements
+    const input = document.querySelector(".search-input");
+    const btnListen = document.querySelector(".mic-button");
+    let listening = false;
+    var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
+  
+    // if there's speech recognition, show the microphone
+    if (SpeechRecognition) {
+   setTimeout(function () {
+         btnListen.classList.add("show");
+       }, 1000);
+      console.log("listening");
+    }
+  
+    // show/hide placeholder
+    
+  
+    // listen to speech
+    btnListen.addEventListener("click", function () {
+        btnListen.classList.add("listening");
+
+      if (!listening) {
+        
+        const recognition = new SpeechRecognition();
+  
+        recognition.onstart = function () {
+           btnListen.classList.add("listening");
+          listening = true;
+        };
+  
+        recognition.onspeechend = function () {
+          recognition.stop();
+          btnListen.classList.remove("listening");
+          listening = false;
+        };
+  
+        recognition.onerror = function () {
+          btnListen.classList.remove("listening");
+          listening = false;
+        };
+  
+        recognition.onresult = function (event) {
+          const transcript = event.results[0][0].transcript;
+          const confidence = event.results[0][0].confidence;
+  
+          input.value = transcript;
+          console.log(transcript);
+          input.focus();
+        };
+  
+        recognition.start();
+      }
+    });
+  }
+  
+  startSearch();
+  

styles/speech.css

@@ -0,0 +1,51 @@
+.mic-button{
+    display: none;
+    position: relative;
+    right : 12px;
+    font-size: 1em;
+    background: none;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    padding: 10px;
+    
+}
+.show{
+    display: inline-block;
+}
+.mic-button :hover{
+    background-color: rgb(219, 214, 214);
+    border-radius: 100%;
+    padding: 15px;
+    height: 10px;
+    width: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+#animated-voice{
+    display: none;
+}
+.listening{
+    
+    background-color: rgb(8, 8, 8);
+    padding: 20px;
+    border-radius: 100%;
+    height: 10px;
+    width: 10px;
+    
+}
+.listening >i{
+    display: none;
+}
+.listening #animated-voice{
+    display: block;
+    position: relative;
+    right: 9.5px;
+    bottom: 7px;
+    font-size: 1.25em;
+
+}