Add an options page to Select-to-Speak and allow setting voice name, rate

chrome/browser/resources/chromeos/select_to_speak/select_to_speak.js

Index: chrome/browser/resources/chromeos/select_to_speak/select_to_speak.js
diff --git a/chrome/browser/resources/chromeos/select_to_speak/select_to_speak.js b/chrome/browser/resources/chromeos/select_to_speak/select_to_speak.js
index fbc377bd5620b31fd6e4e00330e425e596ecc624..4b7e56ad8dc87fb2ae4d8614057c70ab9ba55cf6 100644
--- a/chrome/browser/resources/chromeos/select_to_speak/select_to_speak.js
+++ b/chrome/browser/resources/chromeos/select_to_speak/select_to_speak.js
@@ -68,6 +68,14 @@ var SelectToSpeak = function() {
     desktop.addEventListener(
         EventType.MOUSE_CANCELED, this.onMouseCanceled_.bind(this), true);
   }.bind(this));
+
+  /** @private { ?string } */
+  this.voiceName_ = null;
+
+  /** @private { number } */
+  this.speechRate_ = 1.0;
+
+  this.initPreferences_();
 };
 
 SelectToSpeak.prototype = {
@@ -189,8 +197,10 @@ SelectToSpeak.prototype = {
     for (var i = 0; i < nodes.length; i++) {
       var node = nodes[i];
       var isLast = (i == nodes.length - 1);
-      chrome.tts.speak(node.name || '', {
+
+      var options = {
         lang: 'en-US',
+        rate: this.rate_,
         'enqueue': true,
         onEvent: (function(node, isLast, event) {
           if (event.type == 'start') {
@@ -204,8 +214,71 @@ SelectToSpeak.prototype = {
             }
           }
         }).bind(this, node, isLast)
-      });
+      };
+      if (this.voiceName_) {
+        options['voiceName'] = this.voiceName_;
+      }
+      chrome.tts.speak(node.name || '', options);
     }
+  },
+
+  /**
+   * Loads preferences from chrome.storage, sets default values if
+   * necessary, and registers a listener to update prefs when they
+   * change.
+   */
+  initPreferences_: function() {
+    var updatePrefs = (function() {
+      chrome.storage.sync.get(['voice', 'rate'], (function(prefs) {
+        if (prefs['voice']) {

[David Tseng, 2017/03/29 22:24:46]

Just a warning, a voice synced in this way might be invalid on this machine. For
example, if I use a Chromebook with ARC, and select that voice. Logging into
another Chromebook without that voice will sync 'android' for the voice, but
nothing on this machine will speak.

[dmazzoni, 2017/03/30 20:19:17]

Good catch.

I made this more robust by tracking the prefs voice,
the best voice for the locale, and the installed 
voices, all separately. Now it takes all of that
into account each time it sends a speech command.

I tested it manually by setting the pref to an
extension voice, then uninstalling the extension and
verifying that it falls back on the best voice for
the locale.

+          this.voiceName_ = prefs['voice'];
+        }
+        if (prefs['rate']) {
+          this.rate_ = parseFloat(prefs['rate']);
+        } else {
+          chrome.storage.sync.set({'rate': this.rate_});
+        }
+      }).bind(this));
+    }).bind(this);
+
+    updatePrefs();
+    chrome.storage.onChanged.addListener(updatePrefs);
+
+    this.updateDefaultVoice_();
+    window.speechSynthesis.onvoiceschanged =
+        this.updateDefaultVoice_.bind(this);
+  },
+
+  /**
+   * Get the list of TTS voices, and set the default voice if not already set.
+   */
+  updateDefaultVoice_: function() {
+    var uiLocale = chrome.i18n.getMessage('@@ui_locale');
+    uiLocale = uiLocale.replace('_', '-').toLowerCase();
+
+    chrome.tts.getVoices(function(voices) {
+      if (voices.length == 0)
+        return;
+
+      voices.sort(function(a, b) {
+        function score(voice) {
+          var lang = voice.lang.toLowerCase();
+          var s = 0;
+          if (lang == uiLocale)
+            s += 2;
+          if (lang.substr(0, 2) == uiLocale.substr(0, 2))
+            s += 1;
+          return s;
+        }
+        return score(b) - score(a);
+      });
+
+      chrome.storage.sync.get(['voice'], (function(prefs) {
+        if (!prefs['voice']) {
+          chrome.storage.sync.set({'voice': voices[0].voiceName});
+        }
+      }).bind(this));
+    });
   }
 };