Skip to content

Instantly share code, notes, and snippets.

@all3xfx

all3xfx/index.html

Forked from anonymous/index.html
Created August 27, 2016 04:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save all3xfx/6591277e0dc5a105718c5bcd559317a0 to your computer and use it in GitHub Desktop.
Save all3xfx/6591277e0dc5a105718c5bcd559317a0 to your computer and use it in GitHub Desktop.
Download ZIP
Form demo This is the form demo of the talk Talking and listening to web pages // source http://jsbin.com/faguji/1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="This is the form demo of the talk Talking and listening to web pages" />
<meta charset="utf-8">
<title>Form demo</title>
<style id="jsbin-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;
}
</style>
</head>
<body>
<h2>“Demo it or it didn't happen”&trade;</h2>
<p>Register to our website</p>
<form>
<label for="form-demo-name" data-question="What's your name?">Name:</label>
<input id="form-demo-name" />
<label for="form-demo-surname" data-question="What's your surname?">Surname:</label>
<input id="form-demo-surname" />
<label for="form-demo-nationality" data-question="What's your nationality?">Nationality:</label>
<input id="form-demo-nationality" />
<input id="form-demo-voice" type="submit" value="Start" />
</form>
<small>
Demo created by <a href="http://www.audero.it">Aurelio De Rosa</a> (<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>).<br />
This demo is part of the talk <a href="https://speakerdeck.com/aurelioderosa/talking-and-listening-to-web-pages-webtech-conference-2014"><cite>Talking and listening to web pages</cite></a>.
</small>
<div class="spinner-wrapper hidden">
<div class="spinner"></div>
Speak now
</div>
<script id="jsbin-javascript">
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('Thank you for filling the form!');
})
.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();
});
}
};
</script>
<script id="jsbin-source-css" type="text/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;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">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('Thank you for filling the form!');
})
.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();
});
}
};</script></body>
</html>
Raw
jsbin.faguji.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;
}
Raw
jsbin.faguji.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('Thank you for filling the form!');
})
.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();
});
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment