comments ++

master
poni 3 years ago
parent a104e1b04d
commit cda8a50059

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>S2D</title>
<script src="index.js" defer></script> <script src="index.js" defer></script>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>

@ -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 // GLOBAL VARIABLES
let allTheInterim = ""; let interimTranscripts = ""; // Variable for interim results, the Speech-to-text try different worlds before to give us the most correct one.
let finalTranscripts = ""; let allTheInterim = ""; // Variable to store *all* the interim results
let interimTranscripts = ""; let finalTranscripts = ""; // Variable for the... final transcripts
let speech = document.getElementById("result"); // To define bridges to the html file:
let process = document.getElementById("process"); 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 // TEXT STORAGE
let textStorage = localStorage.getItem("speech"); let textStorage = localStorage.getItem("speech"); // This define where to save the results.
speech.innerHTML = textStorage; 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 // 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", () => { resetStorage.addEventListener("click", () => { // Reset everything!!!
// Reset everything
allTheInterim = ""; allTheInterim = "";
finalTranscripts = ""; finalTranscripts = "";
interimTranscripts = ""; interimTranscripts = "";
@ -28,12 +41,12 @@ resetStorage.addEventListener("click", () => {
// SAVE FILE // 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", () => { saveButton.addEventListener("click", () => {
download("speech.html", localStorage.getItem("speech")); download("speech.html", localStorage.getItem("speech"));
}); });
function download(filename, text) { function download(filename, text) {
var element = document.createElement("a"); var element = document.createElement("a");
element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text)); element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
element.setAttribute("download", filename); element.setAttribute("download", filename);
@ -48,29 +61,30 @@ function download(filename, text) {
// START LISTENING // START LISTENING
startConverting(); startConverting(); // Finally, here is where the magic happen.
function startConverting() { function startConverting() {
if ("webkitSpeechRecognition" in window) { if ("webkitSpeechRecognition" in window) { // Declaring here the API
let speechRecognizer = new webkitSpeechRecognition() || new SpeechRecognition(); let speechRecognizer = new webkitSpeechRecognition() || new SpeechRecognition();
speechRecognizer.continuous = true; // And here the settings, like
speechRecognizer.interimResults = true; speechRecognizer.continuous = true; // if the recognition should continue or stop when you finish to talk
speechRecognizer.lang = "en-US"; speechRecognizer.interimResults = true; // if you want also get the interim results
speechRecognizer.start(); speechRecognizer.lang = "en-US"; // which language you want to recognize (!!)
speechRecognizer.start(); // and then start :))
finalTranscripts = ""; finalTranscripts = "";
// EVENTS // EVENTS
// ON END // 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"); console.log("Speech recognition service disconnected");
speechRecognizer.start(); speechRecognizer.start(); // and then restart itself
}; };
// ON SOUND START // 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"); console.log("Some sound is being received");
}; };
@ -78,8 +92,8 @@ function startConverting() {
speechRecognizer.onerror = function (event) {}; speechRecognizer.onerror = function (event) {};
// ON RESULT // ON RESULT
speechRecognizer.onresult = function (event) { speechRecognizer.onresult = function (event) { // Here is where the Speech-to-text show itself on the web page.
interimTranscripts = ""; interimTranscripts = "";
for (let i = event.resultIndex; i < event.results.length; i++) { for (let i = event.resultIndex; i < event.results.length; i++) {
let transcript = event.results[i][0].transcript; let transcript = event.results[i][0].transcript;
@ -87,7 +101,7 @@ function startConverting() {
transcript.replace("\n", "<br>"); transcript.replace("\n", "<br>");
if (event.results[i].isFinal) { if (event.results[i].isFinal) {
finalTranscripts += transcript; 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; interimTranscripts += transcript;
allTheInterim += `<span style="opacity: ${ allTheInterim += `<span style="opacity: ${
event.results[i][0].confidence + 0.3 event.results[i][0].confidence + 0.3
@ -100,11 +114,14 @@ function startConverting() {
speech.innerHTML = final; speech.innerHTML = final;
textStorage = final; textStorage = final;
console.log(textStorage); 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"; speech.innerHTML = "At the moment this works only in Chrome, sorry";
} }
} }
// 2021, copyleft Kamo and Funix

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save