javascript - SpeechSynthesis 如何返回选定的语言列表？

Question

大家早上好

我仍在为不识字的人做问卷调查。为此，我正在使用文本转语音应用程序(感谢@JO3-W3B-D3V)

问题是调查问卷将以多种语言开发，这意味着文本到语音应用程序也必须支持多种语言。

SpeechSynthesis.getVoices()

如果我没理解错的话，上面的函数会返回代表当前设备上所有可用语音的所有对象的列表。现在回答我的问题:

1. 有没有办法返回这些语言的选择？例如，列表不应该返回设备上可用的所有 15 种语言，而是只返回 4 种选择的语言？

2. 有没有办法为设备添加更多语言？我正在使用 Chrome。如果我理解正确的话，Chromes 会从微软和谷歌获取语言。因此，如果我向操作系统 (Windows 10) 添加新语言，Chrome 应该会显示新语言选项。这个假设正确吗？我问是因为我已经这样做了，没有任何改变，所以我可能会遗漏一些东西。

希望我的问题有意义:)

祝你有美好的一天!

Answer 1

解释

好的，考虑到您已经有点问了两个问题，所以我将分两部分回答这个问题，谢天谢地，这两个问题都相对简单明了。

问题一

你问过如何让 _ 选择你想要支持的语言，这很简单，就像操作数组一样简单，在我的示例中我使用了 reduce 函数，相当简单的东西。

P.S. 为了某种形式的一致性，我以一种非常类似于我在您询问的 other question 中编写的方式编写了这段代码关于speechSynthesis。

假设

如代码注释中所述，我以没有重复条目的方式编写此代码段，即在下面的代码段中，您最终将得到一个仅包含一个支持英语的实体的列表。换句话说，您不会同时拥有 en-GB 和 en-US，当然您可以更改它，我只是假设您会想要这种类型的功能，当然这完全取决于您和您的要求。

// IIFE for the sake of it. 
(function() {
  "use strict";

  // This is a simple list of languages that you wish to support. 
  var supportedLanguages = ['en', 'de', 'es', 'fr'];
  var languages = [];

  // This is essentially similar to jQuery's $.ready.
  var ready = function(callback) {
    var d = document,
      s = d.readyState;

    // DOMContentLoaded was fired
    if (s == "complete" || s == "loaded" || s == "interactive") {
      callback();
    } else {
      if (d.addEventListener) {
        d.addEventListener("DOMContentLoaded", callback, false);
      } else {
        d.attachEvent("onDOMContentLoaded", callback);
      }
    }
  };

  // This is just a simple function to process whether or not you'd like to
  // push a voice onto the array or not.
  var shouldPush = function(array, object) {
    var language = object.lang || '';
    var snipped = language.substring(0, 2);

    // Generate a list of all of the known languages. 
    var languageList = array.map(function(object) {
      return object.lang;
    });

    // Create a list of short hand language names.
    var snippedList = languageList.map(function(language) {
      return language.substring(0, 2);
    });

    // Save having a bloated if statement, personally I find this 
    // more readable. 
    //
    // Only push relevant ones, saves having any duplicated entities, i.e. 
    // this will not allow for both en-US & en-GB to be among the list,
    // this can be altered, this is merely based on an assumption that you 
    // wouldn't want both en-US & en-GB, etc. 
    var isToPush = !snippedList.includes(snipped) &&
      !languageList.includes(language) &&
      supportedLanguages.includes(snipped);

    // If true, push to array.
    if (isToPush) {
      array.push(object);
    }

    // Then of course return the array object. 
    return array;
  };

  // This is essentially the list of voices that you've picked to support.
  var getSelectedLanguages = function() {
    languages = speechSynthesis.getVoices().reduce(shouldPush, []);
  };

  // A starting point for this snippet.
  var start = function() {
    speechSynthesis.onvoiceschanged = function() {
      getSelectedLanguages();
      console.log(languages);
    };
  };

  // Run the code when ready.
  ready(start);
})();

问题二

我不完全确定是否有一种“简单明了”的方法来做到这一点，在对此事进行了我自己的研究后，我发现它看起来需要某种形式修修补补。我发现的更好信息来源之一是 this question 。

进一步研究了这个问题，看起来 Artyom 也表明没有简单的方法可以实现这一点，看起来您只能通过将语言安装到操作系统中来添加语言，所以我相信。

结论

一个可能的想法是您可以，我强调可以这个词可能通过实现来做到这一点你自己的 API，但是我无法想象这会是一个可靠的实现，因为我的结论是基于研究表明的，以便使用额外的语言来被包括在内，用户对此负有某种责任，因为它看起来需要用户在他们的操作系统上安装_语言，以便speechSynthesis 使用_ 语言。

实际上我觉得有点奇怪，似乎很少/没有关于这个主题的正式文档，而我只是发现了大部分非正式文档、建议和假设。然而，这可能是由于我缺乏调查，请记住，我最多花了大约 15 分钟来研究这个问题。

来源

1. A link to flaviocopes.com regarding speechSynthesis.
2. A link to Artyom.js, a library for speech related APIs.
3. A link to a previous stack overflow question similar to the second part of this question.
4. A link to a medium article.
5. MDN documentation.
6. A treehouse blog post.

---

虽然我可能没有您想要的第二个问题的答案，但我希望整个答案以某种形式对您有所帮助! :)