让我听听您的浏览器讲话：使用语音合成API

1968年， 2001年：《太空漫游》发行。它以HAL 9000闻名，这是一台超级计算机，能够处理很多事情：面部识别，下棋，甚至读唇。但是，HAL的说话能力深深地吸引了观众，并影响了自那时以来的每一个科幻小说。

如今，计算机讲给它的一段文字很普遍。但是，直到最近，您才能够直接在Web浏览器中执行此操作。这就是本教程要向您展示的内容。

语音合成API允许您使用JavaScript提取一段文本并将其作为语音输出到您的扬声器。与所有新API一样，并非所有浏览器都实现了该API，因此请访问caniuse.com以获取当前支持。撰写本文时，Chrome和Safari在台式机和移动设备上均支持该功能。

你为什么不跟我说话？

让您的浏览器开始与您交谈很简单，您会感到惊讶。首先，创建一个内部带有script标签的新HTML文件，或弹出您浏览器JavaScript控制台。然后在内部写以下行。

var utterance  = new SpeechSynthesisUtterance();

我们在这里所做的是创建一个合成话语的新实例。可以将其视为一个小信封，其中包含一些说明，这些说明告诉浏览器应该说什么以及如何说。

首先，我们必须考虑一些对于浏览器来说非常重要的内容。

utterance.text = 'My name\'s Guybrush Threepwood, and I want to be a pirate!';

然后我们准备出发了。让我们将消息传递给浏览器的语音合成器，并告诉它说出声音。请记住事先调高计算机的音量。

speechSynthesis.speak(utterance);

哇，会说话的电脑。就这么简单。

改变声音

现在，如果这还不够令人印象深刻，那么语音合成API将为我们提供一整套方法和属性，我们可以在“话语”中进行调整以更改其听起来的样子。其中最值得注意的是改变“人”的口语。您的操作系统附带多种内置声音供您选择，此外您的浏览器还会添加一些额外的声音以作好衡量。让我们看看我们有什么声音可以使用。

speechSynthesis.getVoices().forEach(function(voice) {console.log('Hi! My name is ', voice.name);
});

如果看不到任何输出，则可能需要再次运行此功能。 Chrome浏览器存在一个奇怪的错误，您必须先请求两次语音才能正确初始化。要克服此问题，请执行以下操作。

// Tell Chrome to wake up and get the voices.
speechSynthesis.getVoices();setTimeout(function () {// After 1 second, get the voices now Chrome is listening.speechSynthesis.getVoices().forEach(function (voice) {console.log('Hi! My name is ', voice.name);});
}, 1000);

声音的数量因操作系统而异，但在OS X上，我的声音为74！比《辛普森一家》的剧集更多的角色。让我们尝试一下。

您可能会看到， speechSynthesis.getVoices()返回一个数组。我们可以简单地通过以下方式设置声音：

utterance.voice = speechSynthesis.getVoices()[11];

这将告诉浏览器使用“语音11”，在我的情况下是“ Agnes”。可怜的艾格尼丝，数量减少了。将Agnes视为真正的人的一种更好的方法是使用ECMAScript 6方法findIndex ，该方法在也支持Web Synthesis API的浏览器中受支持，所以我们都很好。

var agnesIndex = speechSynthesis.getVoices().findIndex(function (voice) {return voice.name === 'Agnes';
});

现在我们已经获得了Agnes语音所在的voices数组的索引，我们可以设置该语音以供我们的话语使用。

utterance.voice = speechSynthesis.getVoices()[agnesIndex];
utterance.text = 'It\'s me Agnes! I’m alive! Thank you.';
speechSynthesis.speak(utterance);

没有问题，Agnes。但是，您的那声音很大，您吓到我半死了。让我们拒绝你。

音量，速率和音高

幸运的是，我们要做的只是使声音安静下来：

utterance.volume = 0.5;

这将Agnes的声音设置为原来的一半，0保持沉默，1变为最大。但是，我们可以调整的参数并不止于此。您选择说话的声音是太慢还是太快？您可以使用rate属性更改语音朗读文本的速率。

utterance.rate = 0.8;

语音的默认速率为1。因此，在此我们将其降低五分之一。您可以指定的最低速率是0.1，而最快的速率是10。语音也有自己的速率限制，因此，即使将速率设置为10，它也可能不会说出默认速率的10倍。

您可以更改的另一个有趣参数是音高。想要Agnes听起来像Barry White吗？音高就是它的所在。

utterance.pitch = 0.2;

在这里，您可以设置的最低音高为0，同时要使您的声音听起来像他们刚刚吸入了充满氦气的花栗鼠，请将音高设置为2，可以达到最高音高。

大事记

好吧，现在让我们玩得开心。语音合成API有一些不同的事件可供我们玩。这些事件，包括start ， end ， pause和resume等，使我们可以在发生上述事件时调用一个函数。通过听结束事件，我们可以调用一个函数来启动另一个语音对话，从而提供对话的幻觉。

让我们设置两种不同的声音，并给每个声音说一个句子。请记住，所有代码都应位于setTimeout函数中，以确保已加载所有可能的声音。

var voices = window.speechSynthesis.getVoices(),agnesUtterance = new SpeechSynthesisUtterance(),albertUtterance = new SpeechSynthesisUtterance();agnesUtterance.voice = voices[11];
albertUtterance.voice = voices[12];agnesUtterance.text = 'Hello Albert, I\'m Agnes';
albertUtterance.text = 'Hi Agnes, nice to meet you!';

在开始Agnes发言之前，在onend函数调用中，我们像这样设置了Albert的答复。这意味着当Agnes停止讲话时，Albert将开始讲话。

agnesUtterance.onend = function () {speechSynthesis.speak(albertUtterance);
}

看起来挺好的。准备听到深入的对话了吗？以通常的方式启动Agnes。

speechSynthesis.speak(agnesUtterance);

惊人。您的浏览器现在正在与自己对话。天网已成为自我意识。

翻译自: https://code.tutsplus.com/tutorials/let-me-hear-your-browser-talk-using-the-speech-synthesis-api--cms-24971