Fahrek · April 29, 2019 17:55
diff --git a/fill-form-with-voice.markdown b/fill-form-with-voice.markdown
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>Form demo</title>
 </head>
  
 <body>

   <p>Registrate</p>
   <form>
      <label for="form-demo-name" data-question="Cual es tu nombre?">Nombre:</label>
      <input id="form-demo-name" />
      <label for="form-demo-surname" data-question="Cual es tu apellido?">Apellido:</label>
      <input id="form-demo-surname" />
      <label for="form-demo-nationality" data-question="Cual es tu nacionalidad?">Nacionalidad:</label>
      <input id="form-demo-nationality" />
      <input id="form-demo-voice" type="submit" value="Empezar" />
   </form>

   <div class="spinner-wrapper hidden">
      <div class="spinner"></div>
      Habla ahora
   </div>
 </body>
 </html>
diff --git a/script.js b/script.js
 document.getElementById('form-demo-voice').addEventListener('click', function(event) {
   event.preventDefault();

   var spinner     = document.getElementsByClassName('spinner-wrapper')[0];
   var fieldLabels = [].slice.call(document.querySelectorAll('label'));
   var promise     = new Promise(function(resolve) {
      resolve();
   });

   var formData = function(i) {
      return promise.then(function() {
                 return Speech.speak(fieldLabels[i].dataset.question);
              })
              .then(function() {
                 spinner.classList.remove('hidden');
                 return Speech.recognize().then(function(text) {
                    spinner.classList.add('hidden');
                    document.getElementById(fieldLabels[i].getAttribute('for')).value = text;
                 });
              });
   };

   for(var i = 0; i < fieldLabels.length; i++) {
      promise = formData(i);
   }

   promise.then(function() {
      return Speech.speak('Gracias por rellenar el formulario!');
   })
   .catch(function(error) {
     spinner.classList.add('hidden');
     alert(error);
   });
 });


 /* SUPPORT OBJECT */
 var Speech = {
   speak: function(text) {
      return new Promise(function(resolve, reject) {
         if (!SpeechSynthesisUtterance) {
            reject('API not supported');
         }
      
         var utterance = new SpeechSynthesisUtterance(text);

         utterance.addEventListener('end', function() {
            console.log('Synthesizing completed');
            resolve();
         });

         utterance.addEventListener('error', function (event) {
            console.log('Synthesizing error');
            reject('An error has occurred while speaking: ' + event.error);
         });

         console.log('Synthesizing the text: ' + text);
         speechSynthesis.speak(utterance);
      });
   },
   recognize: function() {
      return new Promise(function(resolve, reject) {
         var SpeechRecognition = SpeechRecognition        ||
                                 webkitSpeechRecognition  ||
                                 null;

         if (SpeechRecognition === null) {
            reject('API not supported');
         }

         var recognizer = new SpeechRecognition();

         recognizer.addEventListener('result', function (event) {
            console.log('Recognition completed');
            for (var i = event.resultIndex; i < event.results.length; i++) {
               if (event.results[i].isFinal) {
                  resolve(event.results[i][0].transcript);
               }
            }
         });

         recognizer.addEventListener('error', function (event) {
            console.log('Recognition error');
            reject('An error has occurred while recognizing: ' + event.error);
         });

         recognizer.addEventListener('nomatch', function (event) {
            console.log('Recognition ended because of nomatch');
            reject('Error: sorry but I could not find a match');
         });

         recognizer.addEventListener('end', function (event) {
            console.log('Recognition ended');
            // If the Promise isn't resolved or rejected at this point
            // the demo is running on Chrome and Windows 8.1 (issue #428873).
            reject('Error: sorry but I could not recognize your speech');
         });

         console.log('Recognition started');
         recognizer.start();
      });
   }
 };
diff --git a/style.css b/style.css
 body
 {
   font-size: 24px;
 }

 label
 {
   display: block;
 }

 input
 {
   display: block;
   font-size: inherit;
   margin-bottom: 0.5em;
 }

 input[type="submit"]
 {
   padding: 0.2em 0.5em;
 }

 .icon-tts
 {
   float: right;
   cursor: pointer;
 }

 .button-demo
 {
   font-size: inherit;
   padding: 0.5em;
   display: inline-block;
   margin: 0.5em auto;
 }

 @-webkit-keyframes rotation
 {
   from
   {
      -webkit-transform: rotate(0deg);
   }
   to
   {
      -webkit-transform: rotate(359deg);
   }
 }

 @keyframes rotation
 {
   from
   {
      transform: rotate(0deg);
   }
   to
   {
      transform: rotate(359deg);
   }
 }

 .spinner-wrapper
 {
   display: inline-block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   background: rgba(180, 180, 180, 0.7);
   text-align: center;
   padding: 20px;
 }

 .spinner
 {
   height: 60px;
   width: 60px;
   margin: 10px auto;
   position: relative;
   -webkit-animation: rotation .6s infinite linear;
   animation: rotation .6s infinite linear;
   border-left: 6px solid rgba(0, 174, 239, .15);
   border-right: 6px solid rgba(0, 174, 239, .15);
   border-bottom: 6px solid rgba(0, 174, 239, .15);
   border-top: 6px solid rgba(0, 174, 239, .8);
   border-radius: 100%;
 }

 .hidden
 {
   display: none !important;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Form demo</title>
	</head>

	<body>

	<p>Registrate</p>
	<form>
	<label for="form-demo-name" data-question="Cual es tu nombre?">Nombre:</label>
	<input id="form-demo-name" />
	<label for="form-demo-surname" data-question="Cual es tu apellido?">Apellido:</label>
	<input id="form-demo-surname" />
	<label for="form-demo-nationality" data-question="Cual es tu nacionalidad?">Nacionalidad:</label>
	<input id="form-demo-nationality" />
	<input id="form-demo-voice" type="submit" value="Empezar" />
	</form>

	<div class="spinner-wrapper hidden">
	<div class="spinner"></div>
	Habla ahora
	</div>
	</body>
	</html>
	document.getElementById('form-demo-voice').addEventListener('click', function(event) {
	event.preventDefault();

	var spinner = document.getElementsByClassName('spinner-wrapper')[0];
	var fieldLabels = [].slice.call(document.querySelectorAll('label'));
	var promise = new Promise(function(resolve) {
	resolve();
	});

	var formData = function(i) {
	return promise.then(function() {
	return Speech.speak(fieldLabels[i].dataset.question);
	})
	.then(function() {
	spinner.classList.remove('hidden');
	return Speech.recognize().then(function(text) {
	spinner.classList.add('hidden');
	document.getElementById(fieldLabels[i].getAttribute('for')).value = text;
	});
	});
	};

	for(var i = 0; i < fieldLabels.length; i++) {
	promise = formData(i);
	}

	promise.then(function() {
	return Speech.speak('Gracias por rellenar el formulario!');
	})
	.catch(function(error) {
	spinner.classList.add('hidden');
	alert(error);
	});
	});


	/* SUPPORT OBJECT */
	var Speech = {
	speak: function(text) {
	return new Promise(function(resolve, reject) {
	if (!SpeechSynthesisUtterance) {
	reject('API not supported');
	}

	var utterance = new SpeechSynthesisUtterance(text);

	utterance.addEventListener('end', function() {
	console.log('Synthesizing completed');
	resolve();
	});

	utterance.addEventListener('error', function (event) {
	console.log('Synthesizing error');
	reject('An error has occurred while speaking: ' + event.error);
	});

	console.log('Synthesizing the text: ' + text);
	speechSynthesis.speak(utterance);
	});
	},
	recognize: function() {
	return new Promise(function(resolve, reject) {
	var SpeechRecognition = SpeechRecognition \|\|
	webkitSpeechRecognition \|\|
	null;

	if (SpeechRecognition === null) {
	reject('API not supported');
	}

	var recognizer = new SpeechRecognition();

	recognizer.addEventListener('result', function (event) {
	console.log('Recognition completed');
	for (var i = event.resultIndex; i < event.results.length; i++) {
	if (event.results[i].isFinal) {
	resolve(event.results[i][0].transcript);
	}
	}
	});

	recognizer.addEventListener('error', function (event) {
	console.log('Recognition error');
	reject('An error has occurred while recognizing: ' + event.error);
	});

	recognizer.addEventListener('nomatch', function (event) {
	console.log('Recognition ended because of nomatch');
	reject('Error: sorry but I could not find a match');
	});

	recognizer.addEventListener('end', function (event) {
	console.log('Recognition ended');
	// If the Promise isn't resolved or rejected at this point
	// the demo is running on Chrome and Windows 8.1 (issue #428873).
	reject('Error: sorry but I could not recognize your speech');
	});

	console.log('Recognition started');
	recognizer.start();
	});
	}
	};
	body
	{
	font-size: 24px;
	}

	label
	{
	display: block;
	}

	input
	{
	display: block;
	font-size: inherit;
	margin-bottom: 0.5em;
	}

	input[type="submit"]
	{
	padding: 0.2em 0.5em;
	}

	.icon-tts
	{
	float: right;
	cursor: pointer;
	}

	.button-demo
	{
	font-size: inherit;
	padding: 0.5em;
	display: inline-block;
	margin: 0.5em auto;
	}

	@-webkit-keyframes rotation
	{
	from
	{
	-webkit-transform: rotate(0deg);
	}
	to
	{
	-webkit-transform: rotate(359deg);
	}
	}

	@keyframes rotation
	{
	from
	{
	transform: rotate(0deg);
	}
	to
	{
	transform: rotate(359deg);
	}
	}

	.spinner-wrapper
	{
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background: rgba(180, 180, 180, 0.7);
	text-align: center;
	padding: 20px;
	}

	.spinner
	{
	height: 60px;
	width: 60px;
	margin: 10px auto;
	position: relative;
	-webkit-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
	border-left: 6px solid rgba(0, 174, 239, .15);
	border-right: 6px solid rgba(0, 174, 239, .15);
	border-bottom: 6px solid rgba(0, 174, 239, .15);
	border-top: 6px solid rgba(0, 174, 239, .8);
	border-radius: 100%;
	}

	.hidden
	{
	display: none !important;
	}