Merge pull request #117 from pradipchaudhary/project86

pradipchaudhary · web-flow · commit 3bf487730f0d · 2024-02-12T15:55:07.000+05:45
init app [project86]
diff --git a/86-Speech Recognition Interface/index.html b/86-Speech Recognition Interface/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Speech Recognition Interface</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <div class="container">
+            <h1>Speech Recognition Interface</h1>
+            <p id="output">Your transcribed speech will appear here.</p>
+            <button id="startBtn">Start Listening</button>
+        </div>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/86-Speech Recognition Interface/script.js b/86-Speech Recognition Interface/script.js
@@ -0,0 +1,45 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const startBtn = document.getElementById("startBtn");
+    const output = document.getElementById("output");
+
+    // Check if the browser supports the Web Speech API
+    if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
+        const recognition = new (window.SpeechRecognition ||
+            window.webkitSpeechRecognition)();
+
+        recognition.continuous = true;
+        recognition.interimResults = true;
+
+        recognition.onstart = () => {
+            startBtn.innerText = "Listening...";
+        };
+
+        recognition.onresult = (event) => {
+            const transcript = Array.from(event.results)
+                .map((result) => result[0].transcript)
+                .join("");
+
+            output.innerText = transcript;
+        };
+
+        recognition.onend = () => {
+            startBtn.innerText = "Start Listening";
+        };
+
+        recognition.onerror = (event) => {
+            console.error("Speech recognition error:", event.error);
+        };
+
+        startBtn.addEventListener("click", () => {
+            if (recognition.running) {
+                recognition.stop();
+            } else {
+                recognition.start();
+            }
+        });
+    } else {
+        output.innerText =
+            "Speech recognition is not supported in this browser.";
+        startBtn.disabled = true;
+    }
+});
diff --git a/86-Speech Recognition Interface/styles.css b/86-Speech Recognition Interface/styles.css
@@ -0,0 +1,24 @@
+body {
+    font-family: "Arial", sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #f4f4f4;
+}
+
+.container {
+    text-align: center;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #3498db;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+}
