day30

duyvn0612 · Jun 11, 2024 · 8ce2cd9 · 8ce2cd9
1 parent 5c58dcd
commit 8ce2cd9
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 0 deletions.
diff --git a/Day_30/index.html b/Day_30/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Day 30</title>
+    <style>
+      h1 {
+        text-align: center;
+      }
+      button {
+        display: block;
+        margin: 0 auto;
+        border: none;
+        border-radius: 10px;
+        height: 2.5rem;
+        padding-inline: 2rem;
+        background-color: red;
+        color: white;
+        font-size: 20px;
+      }
+      button:hover {
+        background-color: green;
+      }
+      .notification {
+        margin: 1rem auto;
+        font-size: 18px;
+        color: green;
+        text-align: center;
+        display: none;
+      }
+      .notification.action-red {
+        display: block;
+        color: red;
+      }
+      .notification.action-green {
+        display: block;
+        color: green;
+      }
+      .result {
+        margin: 1rem auto;
+        width: 90%;
+
+        border: 1px solid green;
+        border-radius: 12px;
+        height: 2.5rem;
+        font-size: 1.2rem;
+        text-align: center;
+        display: none;
+      }
+      .result.action {
+        display: block;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Bạn muốn làm gì? Hãy nói gì đó...</h1>
+    <button>Bấm vào đây để nói</button>
+    <p class="notification"></p>
+    <p class="result"></p>
+    <script src="js/day30.js"></script>
+  </body>
+</html>
diff --git a/Day_30/js/day30.js b/Day_30/js/day30.js
@@ -0,0 +1,70 @@
+var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
+
+var speakerBtn = document.querySelector("button");
+var notification = document.querySelector(".notification");
+var result = document.querySelector(".result");
+var utilities = {
+  "google maps": "https://www.google.com/maps",
+  "bản đồ": "https://www.google.com/maps",
+  maps: "https://www.google.com/maps",
+  "google drive": "https://drive.google.com/drive/home",
+  google: "https://www.google.com/",
+  youtube: "https://www.youtube.com/",
+  facebook: "https://www.facebook.com/",
+  "chỉ đường tới": "https://www.google.com/maps/search/",
+  "chỉ đường": "https://www.google.com/maps/search/",
+  "đường tới": "https://www.google.com/maps/search/",
+  tới: "https://www.google.com/maps/search/",
+  "mở bài hát": "https://zingmp3.vn/tim-kiem/tat-ca?q=",
+  "nghe bài hát": "https://zingmp3.vn/tim-kiem/tat-ca?q=",
+  "bài hát": "https://zingmp3.vn/tim-kiem/tat-ca?q=",
+  "mở video": "https://www.youtube.com/results?search_query=",
+  "xem video": "https://www.youtube.com/results?search_query=",
+  video: "https://www.youtube.com/results?search_query=",
+};
+
+console.log(Object.keys(utilities));
+function handlerSpeakers() {
+  var recognition = new SpeechRecognition();
+  recognition.lang = "vi-VN";
+  recognition.interimResults = false;
+  recognition.maxAlternatives = 1;
+  recognition.start();
+  result.classList.remove("action");
+  notification.classList.remove("action-green");
+  notification.classList.add("action-red");
+  notification.textContent = "Hãy nói nội dung bạn muốn";
+  //fnc onresult()
+  var queryStr = "";
+  var checkResult;
+  recognition.onresult = function (e) {
+    var speechResult = e.results[0][0].transcript.toLowerCase();
+    result.classList.add("action");
+    result.textContent = `Đang thực hiện: ${speechResult}`;
+
+    for (var key of Object.keys(utilities)) {
+      checkResult = String(speechResult).indexOf(key);
+      if (checkResult !== -1) {
+        queryStr = String(speechResult).slice(key.length);
+        setTimeout(function () {
+          result.textContent = `Đã thực hiện xong.`;
+          window.open(`${utilities[key]}${queryStr}`, "_blank");
+        }, 1200);
+        break;
+      }
+    }
+    if (checkResult === -1) {
+      setTimeout(function () {
+        result.textContent = `Không thực hiện được yêu cầu`;
+      }, 500);
+    }
+    console.log(speechResult);
+  };
+  recognition.onspeechend = function () {
+    notification.classList.replace("action-red", "action-green");
+    notification.textContent = "Đã nói xong. Hy vọng kết quả như ý bạn";
+    recognition.stop();
+  };
+}
+
+speakerBtn.addEventListener("click", handlerSpeakers);
diff --git a/index.html b/index.html
@@ -152,6 +152,11 @@ <h1>Danh sách bài tập</h1>
             >Day_29</a
           >
         </li>
+        <li>
+          <a href="https://duyvn0612.github.io/f8_fullstack_k7/Day_30/"
+            >Day_30</a
+          >
+        </li>
       </ul>
     </div>
   </body>
-Original file line number
+Diff line change
@@ Expand Up / @@ -152,6 +152,11 @@ <h1>Danh sách bài tập</h1> @@
                 >Day_29</a
               >
             </li>
+            <li>
+              <a href="https://duyvn0612.github.io/f8_fullstack_k7/Day_30/"
+                >Day_30</a
+              >
+            </li>
           </ul>
         </div>
       </body>
@@ Expand Down @@