Wide coverage demo web app: add speech synthesis

Works in Safari and Chrome.

3 files changed, 35 insertions, 1 deletions

diff --git a/src/www/js/langcode.js b/src/www/js/langcode.js
index 5a41a59d3..91df409ad 100644
--- a/src/www/js/langcode.js
+++ b/src/www/js/langcode.js
@@ -25,3 +25,17 @@ for(var i in languages) {
 
 function concname(code) { return langname[code] || code; }
 function alangcode(code) { return langcode2[code] || code; }
+
+// Add a country code to the language code
+function add_country(code) {
+    switch(code) {
+    case "en": return "en-US"  // "en-scotland" // or "en-GB"
+    case "sv": return "sv-SE"
+    case "fr": return "fr-FR"
+    case "de": return "de-DE"
+    case "fi": return "fi-FI"
+    case "zh": return "zh-CN"
+    case "hi": return "hi-IN"
+    default: return code
+    }
+}
diff --git a/src/www/js/wc.js b/src/www/js/wc.js
index 0a91ecf7a..431296e24 100644
--- a/src/www/js/wc.js
+++ b/src/www/js/wc.js
@@ -38,6 +38,7 @@ wc.translate=function() {
 	if(e) e.innerHTML=r.prob+"<br>"+r.tree
 	wc.current=i
 	if(wc.p /*&& wc.r.length>1*/) show_picks()
+	if(f.speak.checked) wc.speak(r.text,f.to.value)
     }
 
     function trans(text,i) {
@@ -66,6 +67,15 @@ wc.translate=function() {
     return false;
 }
 
+wc.speak=function(text,lang) {
+    if(wc.speech) {
+	var u=new SpeechSynthesisUtterance(text)
+	u.lang=add_country(alangcode(lang))
+	speechSynthesis.cancel()
+	speechSynthesis.speak(u)
+    }
+}
+
 wc.swap=function() {
     var f=wc.f
     f.input.value=f.output.value;
@@ -88,3 +98,11 @@ wc.try_google=function() {
     w.focus()
 }
 */
+
+function init_speech() {
+    wc.speech=window.speechSynthesis && window.speechSynthesis.getVoices().length>0
+    if(wc.speech) element("speak").style.display="inline"
+}
+
+init_speech()
+setTimeout(init_speech,500) // A hack for Chrome.
diff --git a/src/www/wc.html b/src/www/wc.html
index 904cfd42a..98b0ef785 100644
--- a/src/www/wc.html
+++ b/src/www/wc.html
@@ -12,6 +12,7 @@ textarea { margin: 0; }
 body:target h1, body:target div.modtime { display: none; }
 #extra { color: #666; }
 #pick>* { padding: 0 0.5ex; }
+#speak { display: none; }
 </style>
 </head>
 
@@ -51,6 +52,7 @@ body:target h1, body:target div.modtime { display: none; }
     <button onclick="wc.swap()">↑↓</button>
   <br>
   <textarea name=output rows=3 style="width: 100%" readonly></textarea>
+  <small id=speak><input name=speak type=checkbox> Speak</small>
 </form>
 
 </table>
@@ -61,7 +63,7 @@ body:target h1, body:target div.modtime { display: none; }
   </div>
 <p>
 <div class=modtime><small>
-<!-- hhmts start -->Last modified: Wed Feb 19 14:56:13 CET 2014 <!-- hhmts end -->
+<!-- hhmts start -->Last modified: Mon Mar 17 16:28:58 CET 2014 <!-- hhmts end -->
 </small></div>
 <script src="js/support.js"></script>
 <script src="js/gftranslate.js"></script>