使用语音合成API创建文字转语音服务

The openness of the web allows it to embrace and extend technologies that were previously only available in specialized commercial applications. One of the best examples of this is the new support of speech in browsers, in the form of both speech recognition and speech generation as native API’s; in this article, I’ll concentrate on the latter.

Web的开放性使其能够接受和扩展以前仅在专用商业应用程序中可用的技术。 最好的例子之一是在浏览器中对语音的新支持，形式是将语音识别和语音生成作为本机API的形式。 在本文中，我将集中讨论后者。

The Speech Synthesis API is supported in Chrome and Safari (both desktop and mobile), Opera and Firefox (with the correct flag enabled); it is currently listed as Under Consideration for Microsoft Edge.

Chrome和Safari(台式机和移动版)，Opera和Firefox(启用了正确的标志)均支持语音合成API； 它目前被列为Microsoft Edge的“考虑中”。

The Speech Synthesis API can be turned on in Firefox by typing about:config into the URL bar, finding the media.webspeech.synth.enabled flag, and setting it to true with a click. Then, quit and restart the browser.

可以在Firefox中打开语音合成API，方法是在URL栏中键入about:config ，找到media.webspeech.synth.enabled标志，然后单击将其设置为true 。 然后，退出并重新启动浏览器。

主人的声音 (His Master’s Voice)

The Speech Synthesis API can be demonstrated with just two lines of JavaScript:

只需两行JavaScript即可演示语音合成API：

var dialogue = new SpeechSynthesisUtterance("Dave, I can see you’re upset");
window.speechSynthesis.speak(dialogue);

Of course, that’s not a terribly practical example. But if we have some text on a page in an <article> tag:

当然，这不是一个非常实际的例子。 但是，如果我们在页面上的<article>标签中有一些文本：

<article>
<p>The next time you see the full moon high in the south, look carefully
at its right-hand edge and let your eye travel upward along the curve 
of the disk…</p>
</article>

We can get a reference to this easily with JavaScript, stripping markup from the text using textContent:

我们可以使用JavaScript轻松获得对此的引用，使用textContent从文本中textContent标记：

var sampleText = document.getElementsByTagName("article")[0].textContent;

Since the Speech Synthesis API is not yet available on every platform, it would be wise to check for support before attempting to use it. We can do so by checking for its presence in the window object:

由于语音综合API尚未在所有平台上都可用，因此在尝试使用它之前检查支持是否明智。 我们可以通过检查它是否存在于window对象中来实现：

if ('speechSynthesis' in window) {
    var bodyText = new SpeechSynthesisUtterance(sampleText);
    window.speechSynthesis.speak(bodyText);
}

用途和变体 (Uses and Variants)

Because the Speech Synthesis API may use a web-based service by default (local services are also a possibility for offline use), it can take a while for it to recognize a change, meaning that the browser may continue to babble even after the tab has been closed. (This is one of the reasons I’ve limited recitation to the first paragraph of this introductory article.)

由于默认情况下语音合成API可能会使用基于Web的服务(本地服务也可以脱机使用)，因此识别更改可能要花费一些时间，这意味着即使在使用Tab键后，浏览器也可能会继续说话已经被关了。 (这是我将朗读限制在本介绍性文章的第一段的原因之一。)

Naturally, the Speech Synthesis API provides the ability to pause recitation, together with a whole host of options, including the ability to pronounce content in different kinds of voices, and even translating text into a different language before reading it aloud.

自然地，语音合成API提供了暂停朗诵的功能以及各种选项，包括以不同种类的语音发音内容的能力，甚至可以在朗读之前将文本翻译成其他语言。

结论 (Conclusion)

While users who require accessibility affordances will likely have text-to-speech software, the existence of the API in modern browsers provides many more options for your site visitors. I’ll be exploring some of those possibilities in the next article.

虽然需要辅助功能的用户可能会使用文本语音转换软件，但现代浏览器中API的存在为您的网站访问者提供了更多选择。 在下一篇文章中，我将探讨其中的一些可能性。

翻译自: https://thenewcode.com/444/Create-a-Text-To-Speech-Service-with-the-Speech-Synthesis-API