comments ++

index.html

@@ -4,7 +4,7 @@
     <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>
+    <title>S2D</title>
     <script src="index.js" defer></script>
     <link rel="stylesheet" href="style.css">
 </head>

index.js

@@ -1,23 +1,36 @@
+// The Myth of the Natural Language %%
+// Speech2Design!!
+
+// Welcome to the core-code of the Speech-to-text
+
+// The tool we are gonna use is the "Web Speech API". 
+
+// What is an API?
+// An API is a set of defined rules that explain how computers or applications communicate with one another. 
+// APIs sit between an application and the web server, acting as an intermediary layer that processes data transfer between systems.
+
+
+
 // GLOBAL VARIABLES
 
-let allTheInterim = "";
-let finalTranscripts = "";
-let interimTranscripts = "";
+let interimTranscripts = "";								// Variable for interim results, the Speech-to-text try different worlds before to give us the most correct one.
+let allTheInterim = "";										// Variable to store *all* the interim results
+let finalTranscripts = "";									// Variable for the... final transcripts 
 
-let speech = document.getElementById("result");
-let process = document.getElementById("process");
+															// To define bridges to the html file:
+let speech = document.getElementById("result");				// where to print the final result of the recognition
+let process = document.getElementById("process");			// and here the process, print the current sentence with interim results
 
 // TEXT STORAGE
 
-let textStorage = localStorage.getItem("speech");
-speech.innerHTML = textStorage;
+let textStorage = localStorage.getItem("speech");			// This define where to save the results.
+speech.innerHTML = textStorage;								// LocalStorage is a type of web storage that allows you to access a local Storage object and store the data in the browser with no expiration date. 
 
 // RESET STORAGE
 
-let resetStorage = document.getElementById("reset");
+let resetStorage = document.getElementById("reset");		// This will just reset, through a button, all the results got by that moment.
 
-resetStorage.addEventListener("click", () => {
-	// Reset everything
+resetStorage.addEventListener("click", () => { 				// Reset everything!!!
 	allTheInterim = "";
 	finalTranscripts = "";
 	interimTranscripts = "";
@@ -28,12 +41,12 @@ resetStorage.addEventListener("click", () => {
 
 // SAVE FILE
 
-let saveButton = document.getElementById("save");
+let saveButton = document.getElementById("save");			// This will let you save the results in your desktop through a button 
 saveButton.addEventListener("click", () => {
 	download("speech.html", localStorage.getItem("speech"));
 });
 
-function download(filename, text) {
+function download(filename, text) {							
 	var element = document.createElement("a");
 	element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
 	element.setAttribute("download", filename);
@@ -48,29 +61,30 @@ function download(filename, text) {
 
 // START LISTENING
 
-startConverting();
+startConverting();											// Finally, here is where the magic happen.
 
-function startConverting() {
-	if ("webkitSpeechRecognition" in window) {
+function startConverting() {								
+	if ("webkitSpeechRecognition" in window) {				// Declaring here the API
 		let speechRecognizer = new webkitSpeechRecognition() || new SpeechRecognition();
 
-		speechRecognizer.continuous = true;
-		speechRecognizer.interimResults = true;
-		speechRecognizer.lang = "en-US";
-		speechRecognizer.start();
+															// And here the settings, like
+		speechRecognizer.continuous = true;					// if the recognition should continue or stop when you finish to talk
+		speechRecognizer.interimResults = true;				// if you want also get the interim results
+		speechRecognizer.lang = "en-US";					// which language you want to recognize (!!)
+		speechRecognizer.start();							// and then start :))
 
 		finalTranscripts = "";
 
 		// EVENTS
 
 		// ON END
-		speechRecognizer.onend = function () {
+		speechRecognizer.onend = function () {				// If the Speech-to-text stops to work, it will be notified in the console...
 			console.log("Speech recognition service disconnected");
-			speechRecognizer.start();
+			speechRecognizer.start();						// and then restart itself
 		};
 
 		// ON SOUND START
-		speechRecognizer.onsoundstart = function () {
+		speechRecognizer.onsoundstart = function () {		// When it starts the Speech-to-text, it will be notified in the console
 			console.log("Some sound is being received");
 		};
 
@@ -78,8 +92,8 @@ function startConverting() {
 		speechRecognizer.onerror = function (event) {};
 
 		// ON RESULT
-		speechRecognizer.onresult = function (event) {
-			interimTranscripts = "";
+		speechRecognizer.onresult = function (event) {		// Here is where the Speech-to-text show itself on the web page.
+			interimTranscripts = "";						
 
 			for (let i = event.resultIndex; i < event.results.length; i++) {
 				let transcript = event.results[i][0].transcript;
@@ -87,7 +101,7 @@ function startConverting() {
 				transcript.replace("\n", "<br>");
 				if (event.results[i].isFinal) {
 					finalTranscripts += transcript;
-				} else {
+				} else {									// There are also shown the interim results and according to their "confidence" (the percentage of how much the word is correct) the color of each word could change
 					interimTranscripts += transcript;
 					allTheInterim += `<span style="opacity: ${
 						event.results[i][0].confidence + 0.3
@@ -100,11 +114,14 @@ function startConverting() {
 
 			speech.innerHTML = final;
 
-			textStorage = final;
+			textStorage = final;							
 			console.log(textStorage);
-			localStorage.setItem("speech", final);
+			localStorage.setItem("speech", final);    		// Here is where is stored the recognized text in the Local Storage
 		};
-	} else {
+	} else {												// Unfortunately this API works only on Chrome...
 		speech.innerHTML = "At the moment this works only in Chrome, sorry";
 	}
 }
+
+
+// 2021, copyleft Kamo and Funix