clean

README.txt

@@ -36,7 +36,7 @@ We will follow a workflow which starts with
 
     the folder 'pagedjs_files' > the library Paged.js
     Paged.js is a free and open source JavaScript library that paginates 
-    content in the browser to create PDF output from any HTML content.)
+    content in the browser to create PDF output from any HTML content.
     https://www.pagedjs.org/about/
 
     the folder 'styles' > there are three different .css files that change

speech/index.js

@@ -0,0 +1,127 @@
+// 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 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 
+
+															// 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");			// 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");		// This will just reset, through a button, all the results got by that moment.
+
+resetStorage.addEventListener("click", () => { 				// Reset everything!!!
+	allTheInterim = "";
+	finalTranscripts = "";
+	interimTranscripts = "";
+	speech.innerHTML = "";
+	textStorage = "";
+	localStorage.setItem("speech", "");
+});
+
+// SAVE FILE
+
+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) {							
+	var element = document.createElement("a");
+	element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
+	element.setAttribute("download", filename);
+
+	element.style.display = "none";
+	document.body.appendChild(element);
+
+	element.click();
+
+	document.body.removeChild(element);
+}
+
+// START LISTENING
+
+startConverting();											// Finally, here is where the magic happen.
+
+function startConverting() {								
+	if ("webkitSpeechRecognition" in window) {				// Declaring here the API
+		let speechRecognizer = new webkitSpeechRecognition() || new SpeechRecognition();
+
+															// 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 () {				// If the Speech-to-text stops to work, it will be notified in the console...
+			console.log("Speech recognition service disconnected");
+			speechRecognizer.start();						// and then restart itself
+		};
+
+		// ON SOUND START
+		speechRecognizer.onsoundstart = function () {		// When it starts the Speech-to-text, it will be notified in the console
+			console.log("Some sound is being received");
+		};
+
+		// ON ERROR
+		speechRecognizer.onerror = function (event) {};
+
+		// ON RESULT
+		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;
+				// console.log(event.results[i][0]);
+				transcript.replace("\n", "<br><br>");
+				if (event.results[i].isFinal) {
+					finalTranscripts += transcript;
+				} 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
+					}">${interimTranscripts}</span> `;
+				}
+			}
+			process.innerHTML = allTheInterim;
+			let final =
+				finalTranscripts + '<span class="interim">' + interimTranscripts + "</span>";
+
+			speech.innerHTML = final;
+
+			textStorage = final;							
+			console.log(textStorage);
+			localStorage.setItem("speech", final);    		// Here is where is stored the recognized text in the Local Storage
+		};
+	} else {												// Unfortunately this API works only on Chrome...
+		speech.innerHTML = "At the moment this works only in Chrome, sorry";
+	}
+}
+
+
+// 2021, copyleft Kamome and Funix