From c38d5cf9b59d4f56ae2038c2baddb47773e36531 Mon Sep 17 00:00:00 2001 From: "John R. D'Orazio" Date: Fri, 25 Dec 2015 04:15:48 +0100 Subject: [PATCH 1/5] removed stray

element, fixed conflicting var --- webspeechdemo/webspeechdemo.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/webspeechdemo/webspeechdemo.html b/webspeechdemo/webspeechdemo.html index b4bc72e..eacbe7d 100644 --- a/webspeechdemo/webspeechdemo.html +++ b/webspeechdemo/webspeechdemo.html @@ -108,7 +108,6 @@

-

@@ -211,8 +210,8 @@

select_dialect.remove(i); } var list = langs[select_language.selectedIndex]; - for (var i = 1; i < list.length; i++) { - select_dialect.options.add(new Option(list[i][1], list[i][0])); + for (var j = 1; j < list.length; j++) { + select_dialect.options.add(new Option(list[j][1], list[j][0])); } select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible'; } @@ -388,4 +387,4 @@

copy_info.style.display = 'none'; email_info.style.display = 'none'; } - \ No newline at end of file + From f00367c54d197ecdd0a47253d44c889fbb117c74 Mon Sep 17 00:00:00 2001 From: "John R. D'Orazio" Date: Fri, 25 Dec 2015 04:33:45 +0100 Subject: [PATCH 2/5] enhancements 1) switch between languages while speech recognition is active, and it will seemlessly update the recognition engine with the new language; 2) add speech synthesis for feedback on input 3) make the final results span editable by the user, so that it seems more like a textarea --- webspeechdemo/webspeechdemo.html | 69 ++++++++++++++++++-------------- 1 file changed, 40 insertions(+), 29 deletions(-) diff --git a/webspeechdemo/webspeechdemo.html b/webspeechdemo/webspeechdemo.html index eacbe7d..47d518c 100644 --- a/webspeechdemo/webspeechdemo.html +++ b/webspeechdemo/webspeechdemo.html @@ -79,6 +79,7 @@ background-color:transparent; padding: 0; } + #final_span[contenteditable]:focus { outline: 0px solid transparent; }

@@ -106,7 +107,7 @@

Start

- +
@@ -196,7 +197,6 @@

['yue-Hant-HK', '粵語 (香港)']], ['日本語', ['ja-JP']], ['Lingua latīna', ['la']]]; - for (var i = 0; i < langs.length; i++) { select_language.options[i] = new Option(langs[i][0], i); } @@ -206,21 +206,38 @@

showInfo('info_start'); function updateCountry() { - for (var i = select_dialect.options.length - 1; i >= 0; i--) { - select_dialect.remove(i); + for (var j = select_dialect.options.length - 1; j >= 0; j--) { + select_dialect.remove(j); } var list = langs[select_language.selectedIndex]; - for (var j = 1; j < list.length; j++) { - select_dialect.options.add(new Option(list[j][1], list[j][0])); + for (var i = 1; i < list.length; i++) { + select_dialect.options.add(new Option(list[i][1], list[i][0])); } select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible'; + if(recognizing){ + ignore_onend = true; + recognition.stop(); + setTimeout(function(){ + recognition.lang = select_dialect.value; + ignore_onend = false; + recognition.start(); + },500); + } } - +var speechReady = true; var create_email = false; var final_transcript = ''; var recognizing = false; var ignore_onend; var start_timestamp; +var msg = new SpeechSynthesisUtterance(); +msg.onend = function(e) { + speechReady = true; + //console.log('Finished in ' + e.elapsedTime + ' seconds.'); +}; +msg.onstart = function(e){ + speechReady = false; +}; if (!('webkitSpeechRecognition' in window)) { upgrade(); } else { @@ -228,21 +245,19 @@

var recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; - recognition.onstart = function() { recognizing = true; showInfo('info_speak_now'); - start_img.src = 'mic-animate.gif'; + start_img.src = 'https://raw.githubusercontent.com/GoogleChrome/webplatform-samples/master/webspeechdemo/mic-animate.gif'; }; - recognition.onerror = function(event) { if (event.error == 'no-speech') { - start_img.src = 'mic.gif'; + start_img.src = 'https://raw.githubusercontent.com/GoogleChrome/webplatform-samples/master/webspeechdemo/mic.gif'; showInfo('info_no_speech'); ignore_onend = true; } if (event.error == 'audio-capture') { - start_img.src = 'mic.gif'; + start_img.src = 'https://raw.githubusercontent.com/GoogleChrome/webplatform-samples/master/webspeechdemo/mic.gif'; showInfo('info_no_microphone'); ignore_onend = true; } @@ -255,13 +270,12 @@

ignore_onend = true; } }; - recognition.onend = function() { recognizing = false; if (ignore_onend) { return; } - start_img.src = 'mic.gif'; + start_img.src = 'https://raw.githubusercontent.com/GoogleChrome/webplatform-samples/master/webspeechdemo/mic.gif'; if (!final_transcript) { showInfo('info_start'); return; @@ -278,41 +292,43 @@

createEmail(); } }; - recognition.onresult = function(event) { var interim_transcript = ''; + var new_final_transcript = ''; for (var i = event.resultIndex; i < event.results.length; ++i) { if (event.results[i].isFinal) { - final_transcript += event.results[i][0].transcript; + new_final_transcript += event.results[i][0].transcript; } else { interim_transcript += event.results[i][0].transcript; } } - final_transcript = capitalize(final_transcript); - final_span.innerHTML = linebreak(final_transcript); +//console.log(new_final_transcript); +if(speechReady && new_final_transcript.length){ + msg.lang = select_dialect.value; + msg.text = new_final_transcript; + window.speechSynthesis.speak(msg); +} +final_transcript = capitalize(new_final_transcript); +final_span.innerHTML = final_span.innerHTML + linebreak(final_transcript); interim_span.innerHTML = linebreak(interim_transcript); if (final_transcript || interim_transcript) { showButtons('inline-block'); } }; } - function upgrade() { start_button.style.visibility = 'hidden'; showInfo('info_upgrade'); } - var two_line = /\n\n/g; var one_line = /\n/g; function linebreak(s) { return s.replace(two_line, '

').replace(one_line, '
'); } - var first_char = /\S/; function capitalize(s) { return s.replace(first_char, function(m) { return m.toUpperCase(); }); } - function createEmail() { var n = final_transcript.indexOf('\n'); if (n < 0 || n >= 80) { @@ -322,7 +338,6 @@

var body = encodeURI(final_transcript.substring(n + 1)); window.location.href = 'mailto:?subject=' + subject + '&body=' + body; } - function copyButton() { if (recognizing) { recognizing = false; @@ -332,7 +347,6 @@

copy_info.style.display = 'inline-block'; showInfo(''); } - function emailButton() { if (recognizing) { create_email = true; @@ -345,7 +359,6 @@

email_info.style.display = 'inline-block'; showInfo(''); } - function startButton(event) { if (recognizing) { recognition.stop(); @@ -355,14 +368,13 @@

recognition.lang = select_dialect.value; recognition.start(); ignore_onend = false; - final_span.innerHTML = ''; + //final_span.innerHTML = ''; interim_span.innerHTML = ''; - start_img.src = 'mic-slash.gif'; + start_img.src = 'https://raw.githubusercontent.com/GoogleChrome/webplatform-samples/master/webspeechdemo/mic-slash.gif'; showInfo('info_allow'); showButtons('none'); start_timestamp = event.timeStamp; } - function showInfo(s) { if (s) { for (var child = info.firstChild; child; child = child.nextSibling) { @@ -375,7 +387,6 @@

info.style.visibility = 'hidden'; } } - var current_style; function showButtons(style) { if (style == current_style) { From 2dee3e687e52eaaee832989cdb5e5334228f0382 Mon Sep 17 00:00:00 2001 From: "John R. D'Orazio" Date: Fri, 25 Dec 2015 05:03:45 +0100 Subject: [PATCH 3/5] switched the variable fix so it's consistent --- webspeechdemo/webspeechdemo.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webspeechdemo/webspeechdemo.html b/webspeechdemo/webspeechdemo.html index 47d518c..5a3577e 100644 --- a/webspeechdemo/webspeechdemo.html +++ b/webspeechdemo/webspeechdemo.html @@ -206,12 +206,12 @@

showInfo('info_start'); function updateCountry() { - for (var j = select_dialect.options.length - 1; j >= 0; j--) { - select_dialect.remove(j); + for (var i = select_dialect.options.length - 1; i >= 0; i--) { + select_dialect.remove(i); } var list = langs[select_language.selectedIndex]; - for (var i = 1; i < list.length; i++) { - select_dialect.options.add(new Option(list[i][1], list[i][0])); + for (var j = 1; j < list.length; j++) { + select_dialect.options.add(new Option(list[j][1], list[j][0])); } select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible'; if(recognizing){ From 1df6f08090216ee47fb0884655a4ba46367c1582 Mon Sep 17 00:00:00 2001 From: "John R. D'Orazio" Date: Fri, 25 Dec 2015 05:06:07 +0100 Subject: [PATCH 4/5] img src's consistent with original master branch --- webspeechdemo/webspeechdemo.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/webspeechdemo/webspeechdemo.html b/webspeechdemo/webspeechdemo.html index 5a3577e..16e5ddf 100644 --- a/webspeechdemo/webspeechdemo.html +++ b/webspeechdemo/webspeechdemo.html @@ -248,16 +248,16 @@

recognition.onstart = function() { recognizing = true; showInfo('info_speak_now'); - start_img.src = 'https://raw.githubusercontent.com/GoogleChrome/webplatform-samples/master/webspeechdemo/mic-animate.gif'; + start_img.src = 'mic-animate.gif'; }; recognition.onerror = function(event) { if (event.error == 'no-speech') { - start_img.src = 'https://raw.githubusercontent.com/GoogleChrome/webplatform-samples/master/webspeechdemo/mic.gif'; + start_img.src = 'mic.gif'; showInfo('info_no_speech'); ignore_onend = true; } if (event.error == 'audio-capture') { - start_img.src = 'https://raw.githubusercontent.com/GoogleChrome/webplatform-samples/master/webspeechdemo/mic.gif'; + start_img.src = 'mic.gif'; showInfo('info_no_microphone'); ignore_onend = true; } @@ -275,7 +275,7 @@

if (ignore_onend) { return; } - start_img.src = 'https://raw.githubusercontent.com/GoogleChrome/webplatform-samples/master/webspeechdemo/mic.gif'; + start_img.src = 'mic.gif'; if (!final_transcript) { showInfo('info_start'); return; @@ -370,7 +370,7 @@

ignore_onend = false; //final_span.innerHTML = ''; interim_span.innerHTML = ''; - start_img.src = 'https://raw.githubusercontent.com/GoogleChrome/webplatform-samples/master/webspeechdemo/mic-slash.gif'; + start_img.src = 'mic-slash.gif'; showInfo('info_allow'); showButtons('none'); start_timestamp = event.timeStamp; From 4d355df1b9e655dfb4d97e54e79a77cc065e37d6 Mon Sep 17 00:00:00 2001 From: "John R. D'Orazio" Date: Fri, 25 Dec 2015 05:56:11 +0100 Subject: [PATCH 5/5] added speech synthesis feedback The speech synthesis feedback can be turned on or off by the user. An ON-OFF switch is provided in the interface. --- webspeechdemo/webspeechdemo.html | 106 ++++++++++++++++++++++++++----- 1 file changed, 90 insertions(+), 16 deletions(-) diff --git a/webspeechdemo/webspeechdemo.html b/webspeechdemo/webspeechdemo.html index 16e5ddf..47d2d67 100644 --- a/webspeechdemo/webspeechdemo.html +++ b/webspeechdemo/webspeechdemo.html @@ -80,6 +80,63 @@ padding: 0; } #final_span[contenteditable]:focus { outline: 0px solid transparent; } + + .onoffswitch { + position: relative; width: 90px; + -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; + } + .onoffswitch-checkbox { + display: none; + } + .onoffswitch-label { + display: block; overflow: hidden; cursor: pointer; + border: 2px solid #999999; border-radius: 20px; + } + .onoffswitch-inner { + display: block; width: 200%; margin-left: -100%; + transition: margin 0.3s ease-in 0s; + } + .onoffswitch-inner:before, .onoffswitch-inner:after { + display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; + font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; + box-sizing: border-box; + } + .onoffswitch-inner:before { + content: "ON"; + padding-left: 10px; + background-color: #34A7C1; color: #FFFFFF; + } + .onoffswitch-inner:after { + content: "OFF"; + padding-right: 10px; + background-color: #EEEEEE; color: #999999; + text-align: right; + } + .onoffswitch-switch { + display: block; width: 18px; margin: 6px; + background: #FFFFFF; + position: absolute; top: 0; bottom: 0; + right: 56px; + border: 2px solid #999999; border-radius: 20px; + transition: all 0.3s ease-in 0s; + } + .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { + margin-left: 0; + } + .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { + right: 0px; + } + #enable_synthesis { + display: inline-block; + margin: 16px auto; + } + #enable_synthesis #switch_container { + float: left; + } + #enable_synthesis h3 { + float: left; + margin: 5px 14px; + }

@@ -132,6 +189,18 @@

  

+
+
+
+ + +
+
+

Enable speech synthesis feedback

+