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/4] 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/4] 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 3e38af2eb55691595c9847ca65e4312ed68fba04 Mon Sep 17 00:00:00 2001 From: "John R. D'Orazio" Date: Fri, 25 Dec 2015 04:39:29 +0100 Subject: [PATCH 3/4] enhancements (without speech synthesis) --- webspeechdemo/webspeechdemo.html | 24 +++++------------------- 1 file changed, 5 insertions(+), 19 deletions(-) diff --git a/webspeechdemo/webspeechdemo.html b/webspeechdemo/webspeechdemo.html index 47d518c..6657840 100644 --- a/webspeechdemo/webspeechdemo.html +++ b/webspeechdemo/webspeechdemo.html @@ -224,20 +224,11 @@

},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 { @@ -248,16 +239,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 +266,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; @@ -303,11 +294,6 @@

} } //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); @@ -370,7 +356,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 9cc71e1eee5cf4c419d2bf238b5da88d684893df Mon Sep 17 00:00:00 2001 From: "John R. D'Orazio" Date: Fri, 25 Dec 2015 04:56:23 +0100 Subject: [PATCH 4/4] fixed duplicate variable --- webspeechdemo/webspeechdemo.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webspeechdemo/webspeechdemo.html b/webspeechdemo/webspeechdemo.html index 6657840..2cf8561 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){