init

3 years ago · 94d72d3ced
commit 94d72d3ced
3 changed files with 99 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!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>Document</title>
+    <script src="index.js" defer></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <button id="save">Save</button>
+    <div id="result"></div>
+    <div id="process"></div>
+</body>
+</html>
--- a/index.js
+++ b/index.js
@ -0,0 +1,68 @@
+let recognition = new webkitSpeechRecognition() || new SpeechRecognition();
+
+let textStorage = localStorage.getItem("speech");
+
+let allTheInterim = "";
+
+let speech = document.getElementById("result");
+let process = document.getElementById("process");
+startConverting();
+
+function startConverting() {
+	if ("webkitSpeechRecognition" in window) {
+		let speechRecognizer = new webkitSpeechRecognition() || new SpeechRecognition();
+		speechRecognizer.continuous = true;
+
+		speechRecognizer.interimResults = true;
+
+		speechRecognizer.lang = "en-US";
+		speechRecognizer.start();
+
+		let finalTranscripts = "";
+
+		speechRecognizer.addEventListener("end", function () {
+			console.log("Speech recognition service disconnected");
+			speechRecognizer.start();
+		});
+
+		speechRecognizer.onsoundstart = function () {
+			console.log("Some sound is being received");
+		};
+
+		speechRecognizer.onresult = function (event) {
+			let interimTranscripts = "";
+
+			for (let i = event.resultIndex; i < event.results.length; i++) {
+				let transcript = event.results[i][0].transcript;
+				// console.log(event.results[i][0]);
+				transcript.replace("\n", "<br>");
+				if (event.results[i].isFinal) {
+					finalTranscripts += transcript;
+				} else {
+					interimTranscripts += transcript;
+					allTheInterim += `<span style="opacity: ${
+						event.results[i][0].confidence + 0.3
+					}">${interimTranscripts}</span> `;
+				}
+			}
+			process.innerHTML = allTheInterim;
+			let final =
+				finalTranscripts + '<span class="interim">' + interimTranscripts + "</span>";
+
+			speech.innerHTML = final;
+
+			textStorage += finalTranscripts;
+
+			localStorage.setItem("speech", textStorage);
+		};
+		speechRecognizer.onerror = function (event) {};
+	} else {
+		speech.innerHTML = "oi va su chrome pirla";
+	}
+}
+let saveButton = document.getElementById("save");
+
+saveButton.addEventListener("click", () => {
+	console.log("we");
+	console.log(localStorage.getItem("speech"));
+});
--- a/style.css
+++ b/style.css
@ -0,0 +1,15 @@
+.interim {
+	color: #999;
+}
+
+#result {
+	max-width: 800px;
+	margin: 0 auto;
+	font-size: 2rem;
+}
+
+#process {
+	max-width: 800px;
+	margin: 0 auto;
+	margin-top: 50px;
+}