Web Speech API开发者指南：它是什么以及如何工作-web开发者工具

译者 | 李睿

审校 | 孙淑娟

Web Speech API是一种Web技术，允许用户将语音数据合并到应用程序中。它可以通过浏览器将语音转换为文本，反之亦然。

Web Speech API于2012年由W3C社区引入。而在十年之后，这个API仍在开发中，这是因为浏览器兼容性有限。

该API既支持短时输入片段，例如一个口头命令，也支持长时连续的输入。广泛的听写能力使它非常适合与Applause应用程序集成，而简短的输入很适合语言翻译。

语音识别对可访问性产生了巨大的影响。残疾用户可以使用语音更轻松地浏览网络。因此，这个API可能成为使网络更友好、更高效的关键。

文本到语音和语音到文本的功能由两个界面处理：语音合成和语音识别。

一、语音识别

在语音识别界面中，用户对着麦克风说话，然后语音识别服务就会根据它自己的语法来检查他所说的话。

API通过首先请求允许通过麦克风访问用户的语音来保护他的隐私。如果使用API的页面使用HTTPS协议，则只请求一次权限。否则，API将在每个实例中询问。

用户的设备可能已经包含了语音识别系统，例如iOS或Android语音的Siri。使用语音识别界面时，将会使用默认系统。在语音被识别之后，它将被转换并作为文本字符串返回。

在“one-shot”语音识别中，只要用户停止说话，识别就会结束。这对于简短的命令很有用，例如如在网页上搜索应用程序测试网站或者打电话。在“continuous”识别中，用户必须使用“停止”按钮人工结束识别。

目前，Web Speech API的语音识别只得到了两种浏览器正式支持：Chrome for Desktop和Android。Chrome需要使用前缀界面。

然而，Web Speech API仍处于实验阶段，规范可能会发生变化。可以通过搜索webkitSpeechRecognition对象来检查当前浏览器是否支持该API。

二、语音识别属性

以下学习一个新函数：语音识别()。

var recognizer = new speechRecognition();

现在检查一下某些事件的回调：

（1）onStart：当语音识别器开始收听和识别语音时，会触发onStart。可以显示消息以通知用户的设备正在收听。

（2）onEnd：onEnd生成一个事件，每次用户结束语音识别时都会触发该事件。

（3）onError：每当发生语音识别错误时，都会使用SpeechRecognitionError界面触发此事件。

（4）onResult：当语音识别对象获得结果时，触发此事件。它返回临时结果和最终结果。onResult必须使用SpeechRecognitionEvent界面。

SpeechRecognitionEvent对象包含以下数据：

（1）results[i]：语音识别结果对象的数组，每个元素代表一个已识别的单词。

（2）resultindex：当前识别索引。

（3）results[i][j]：识别单词的第j个替代词；第一个出现的单词是最可能出现的单词。

（4）results[i].isFinal：一个布尔值，显示结果是临时的还是最终的。

（5）results[i][j].transcript：单词的文本表示。

（6）results[i][j].confidence：结果正确的概率(取值范围从0到1) 。

那么，应该在语音识别对象上配置什么属性？以下来看看。

（1）Continuous vs One-Shot

用户确定是否需要语音识别对象在关闭之前一直听他说话，或者是否只需要它来识别一个简短的短语。其默认设置为“false”。

假设正在使用该技术做笔记，以便与库存跟踪模板集成。需要能够长时间说话，并有足够的时间暂停，而不需要将应用程序送回睡眠状态。可以将continuous设置为true，如下所示：

speechRecognition.continuous = true;

（2）语言

希望对象识别什么语言?如果浏览器默认设置为英文，它将自动选择英文。但是，也可以使用地区代码。

此外，可以允许用户从菜单中选择语言：

speechRecognition.lang = document.querySelector("#select_dialect").value;

（3）中期结果

中期结果是指尚未完成或最终的结果。通过将此属性设置为true，可以使对象将临时结果显示为对用户的反馈：

speechRecognition.interimResults = true；

（4）启动和停止

如果已经将语音识别对象配置为“continuous”，则需要设置开始和停止按钮的onClick属性，如下所示：

JavaScript

1 document.querySelector("#start").onclick = () => {
2
3 speechRecognition.start();
4
5 };
6
7 document.querySelector("#stop").onclick = () => {
8
9 speechRecognition.stop();
10
11 };

这将允许用户控制使用的浏览器何时开始“监听”，何时停止。

因此，在深入了解了语音识别界面、方法和属性之后。现在探索Web Speech API的另一面。

三、语音合成

语音合成也被称为文本到语音(TTS)。语音合成是指从应用程序中获取文本，将其转换成语音，然后从设备的扬声器中播放。

可以使用语音合成做任何事情，从驾驶指南到为在线课程朗读课堂笔记，再到视觉障碍用户的屏幕阅读。

在浏览器支持方面，从Gecko42+版本开始，Web Speech API的语音合成可以在Firefox桌面和移动端使用。但是，必须首先启用权限。Firefox OS2.5+默认支持语音合成；不需要权限。Chrome和Android 33+也支持语音合成。

那么，如何让浏览器说话呢?语音合成的主要控制器界面是SpeechSynthesis，但需要一些相关的界面，例如用于输出的声音。大多数操作系统都有默认的语音合成系统。

简单地说，用户需要首先创建一个SpeechSynthesisUtterance界面的实例。其界面包含服务将读取的文本，以及语言、音量、音高和速率等信息。指定这些之后，将实例放入一个队列中，该队列告诉浏览器应该说什么以及什么时候说。

将需要说话的文本指定给其“文本”属性，如下所示：

newUtterance.text =

除非使用.lang属性另有指定，否则语言将默认为应用程序或浏览器的语言。

在网站加载后，语音更改事件可以被触发。要改变浏览器的默认语音，可以使用语音合成中的getvoices()方法。这将显示所有可用的语音。

声音的种类取决于操作系统。谷歌和MacOSx一样有自己的默认声音集。最后，用户使用Array.find()方法选择喜欢的声音。

根据需要定制SpeechSynthesisUtterance。可以启动、停止和暂停队列，或更改通话速度（“速率”）。

四、Web Speech API的优点和缺点

什么时候应该使用Web Speech API？这种技术使用起来很有趣，但仍在发展中。尽管如此，还是有很多潜在的用例。集成API可以帮助实现IT基础设施的现代化，而用户可以了解Web Speech API哪些方面已经成熟可以改进。

1.提高生产力

对着麦克风说话比打字更快捷、更有效。在当今快节奏的工作生活中，人们可能需要能够在旅途中访问网页。

它还可以很好地减少管理工作量。语音到文本技术的改进有可能显著减少数据输入任务的时间。语音到文本技术可以集成到音频视频会议中，以加快会议的记录速度。

2.可访问性

如上所述，语音到文本（STT）和文本语音（TTS）对于有残疾或支持需求的用户来说都是很好的工具。此外，由于任何原因而在写作或拼写方面有困难的用户可以通过语音识别更好地表达自己。

这样，语音识别技术就可以成为互联网上一个很好的均衡器。鼓励在办公室使用这些工具也能促进工作场所的可访问性。

3.翻译

Web Speech API可以成为一种强大的语言翻译工具，因为它同时支持语音到文本（STT）和文本语音（TTS）。目前，并不是每一种语言都可用。这是Web Speech API尚未充分发挥其潜力的一个领域。

4.离线功能

一个缺点是API必须要有互联网连接才能正常工作。此时，浏览器将输入发送到它的服务器，然后服务器返回结果。这限制了Web Speech API可以使用的环境。

5.精确度

在提高语音识别器的准确性方面已经取得了令人难以置信的进展。用户可能偶尔还会遇到一些困难，例如技术术语和其他专业词汇或者方言。然而，到2022年，语音识别软件的精确度已经达到了人类的水平。

五、结语

虽然Web Speech API还处于实验阶段，但它可以成为网站或应用程序的一个惊人的补充。从科技公司到市场营销商，所有的工作场所都可以使用这个API来提高效率。只需几行简单的JavaScript代码，就可以打开一个全新的可访问性世界。

语音识别可以使用户更容易更有效地浏览网页，人们期待看到这项技术快速成长和发展!

原文链接：https://dzone.com/articles/the-developers-guide-to-web-speech-api-what-is-it