Merge pull request #171 from prem-k-r/patch-5

Added Voice Typing (Speech-to-text) feature in Searchbar
XengShi · Nov 11, 2024 · b30744e · b30744e
2 parents 42f53f2 + 9db77cf
commit b30744e
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -142,8 +142,21 @@
                     </svg>
                 </div>
 
-                <input id="searchQ" placeholder="Your query..." type="text" autocomplete="off">
-                <button id="enterBtn">Search</button>
+                <div class="searchbar-content">
+                    <input id="searchQ" placeholder="Your query..." type="text" autocomplete="off">
+
+                    <div class="searchControls">
+                        <!-- Mic Icon -->
+                        <div class="micIcon" id="micIcon">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                <path fill="currentColor"
+                                    d="M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2t2.125.875T15 5v6q0 1.25-.875 2.125T12 14m-1 7v-3.075q-2.6-.35-4.3-2.325T5 11h2q0 2.075 1.463 3.538T12 16t3.538-1.463T17 11h2q0 2.625-1.7 4.6T13 17.925V21z" />
+                            </svg>
+                        </div>
+                        <!-- Search Button -->
+                        <button id="enterBtn">Search</button>
+                    </div>
+                </div>
             </div><br>
             <div id="resultBox" class="resultBox bgLightTint" style="display: none;"></div>
             <!-- ----------end of searchbar-------------- -->
@@ -725,4 +738,4 @@ <h1>Material You NewTab</h1>
     <!-- ending-of-body -->
 </body>
 
-</html>
+</html>
diff --git a/script.js b/script.js
@@ -642,6 +642,54 @@ document.addEventListener("DOMContentLoaded", () => {
 
 });
 
+//  -----------Voice Search------------
+const micIcon = document.getElementById("micIcon");
+const searchInput = document.getElementById("searchQ");
+const resultBox = document.getElementById("resultBox");
+const currentLanguage = getLanguageStatus('selectedLanguage') || 'en';
+
+// Check if the browser supports SpeechRecognition API
+const isSpeechRecognitionAvailable = 'webkitSpeechRecognition' in window || 'SpeechRecognition' in window;
+
+if (isSpeechRecognitionAvailable) {
+    // Initialize SpeechRecognition (cross-browser compatibility)
+    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+    recognition.continuous = false;  // Stop recognition after first result
+    recognition.interimResults = false; // Do not return intermediate results
+    recognition.lang = currentLanguage; // Set the language dynamically based on selected language
+
+    // When speech recognition starts
+    recognition.onstart = () => {
+        micIcon.style.color = 'var(--darkerColor-blue)'; // Change mic color when listening
+        micIcon.style.transform = 'scale(1.1)';
+    };
+
+    // When speech recognition results are available
+    recognition.onresult = (event) => {
+        const transcript = event.results[0][0].transcript; // Get the text from the speech input
+        searchInput.value = transcript; // Set the value of search input to the transcript
+        resultBox.style.display = 'none'; // Hide result box after input
+    };
+
+    // When an error occurs during speech recognition
+    recognition.onerror = (event) => {
+        console.error('Speech recognition error: ', event.error);
+    };
+
+    // When speech recognition ends (either by user or automatically)
+    recognition.onend = () => {
+        micIcon.style.color = 'var(--darkColor-blue)'; // Reset mic color
+        micIcon.style.transform = 'scale(1)'; // Reset scaling
+    };
+
+    // Start speech recognition when mic icon is clicked
+    micIcon.addEventListener('click', () => {
+        recognition.start(); // Start speech recognition when mic icon is clicked
+    });
+} else {
+    console.warn('Speech Recognition API not supported in this browser.');
+}
+//  -----------End of Voice Search------------
 
 
 // Function to apply the selected theme
@@ -961,7 +1009,6 @@ document.getElementById("0NIHK").onclick = () => {
 }
 
 // ------------search suggestions ---------------
-const resultBox = document.querySelector('.resultBox');
 
 // Show the result box
 function showResultBox() {

diff --git a/style.css b/style.css
@@ -581,7 +581,7 @@ body {
     display: block;
     position: absolute;
     height: 80%;
-    width: calc(100% - 120px);
+    width: calc(100% - 165px);
     top: 0;
     bottom: 0;
     margin: auto auto auto 20px;
@@ -593,12 +593,37 @@ body {
     font-size: 1rem;
 }
 
-#enterBtn {
+.searchControls {
     position: absolute;
-    right: 10px;
-    top: 0;
-    bottom: 0;
-    margin: auto;
+    right: 10px; 
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.micIcon {
+    width: 36px;
+    height: 36px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    color: var(--darkColor-blue);
+    cursor: pointer;
+    border-radius: 50%;
+    padding: 3px;
+    box-sizing: content-box;
+    background-color: white;
+    transition: color 0.3s, transform 0.2s;   
+}
+
+.micIcon:hover {
+    color: var(--darkerColor-blue);
+    transform: scale(1.1);
+}
+
+ #enterBtn {
     height: 40px;
     border-radius: 100px;
     padding: 0 26px;
@@ -607,7 +632,7 @@ body {
     background-color: var(--darkColor-blue);
     color: white;
     transition: all 0.3s;
-}
+ }
 
 #enterBtn:hover {
     background-color: var(--darkColor-blue);