语音驱动的Web应用:Web Speech API介绍

5 年前

译注:本文是会说话的Web应用——语音合成API介绍 - 前端外刊评论 - 知乎专栏的姊妹篇。

新的JavaScript Web Speech API可以让你轻松地为网站添加语音识别功能。在Chrome 25或者更新的版本中,这个API使得语音识别变得更精细,更容易控制。在下面这个例子中,话一说完,识别后的文本马上就显示出来了。

示例 / 源码

让我们来看看内部的实现。首先,先看看浏览器是否支持Web Speech API,我们通过检测webkitSpeechRecognition对象是否存在来实现。如果不支持,我们就提示用户升级浏览器。(因为这个API还处于试验阶段,因此前面还带了前缀)。最后,我们创建了一个webkitSpeechRecognition对象,这个对象提供了语音识别的接口,我们给这个对象设置了一些属性,并绑定了一些事件。

if (!('webkitSpeechRecognition' in window)) {
  upgrade();
} else {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function () {...
  }
  recognition.onresult = function (event) {...
  }
  recognition.onerror = function (event) {...
  }
  recognition.onend = function () {...
  }

    ...

continuous的默认值是false,也就是说,当用户停止说话时,语音识别就停止了。这种模式适合处理短输入的字段。在本例中,我们把它设置为true,因此就算用户停止了说话,语音识别也不会停止。

interimResults的默认值是false,意味着,语音识别返回的结果是最终,是不会变化的。示例将其设置为了true,因此,我们一开始获得地结果是中间结果,之后有可能会改变。仔细看一下示例,灰色的文本是中间结果,之后有可能会变。而黑色的结果是语音识别返回的最终结果,已经被标记为了最终值,将不会改变。

用户可以点击麦克风按钮来开始,这会触发下面这段代码:

function startButton(event) {
  ...
  final_transcript = '';
  recognition.lang = select_dialect.value;

  recognition.start();

我们把语音识别的语言”lang”设置为BCP-47标准中的值,这个值是用户通过下拉菜单选择的。例如”en-US”就是English-United States。如果这个参数未设置,那它的默认值就继承自HTML文档的根节点或者是祖先节点的语言设置。Chrome的语音识别支持很多种类型的语言(可以在示例代码中看到),甚至包括一些逆向(从右往左读)的语言,这些语言没有包含在本例中,例如he-IL和 ar-EG。

语言设置好之后,我们调用recognition.start()来激活语言识别。只要他开始捕获到语音时,它就调用onstart事件监听器,然后每次游新结果时,就会调用onresult事件监听器。

recognition.onresult = function (event) {
  var interim_transcript = '';

  for (var i = event.resultIndex; i < event.results.length; ++i) {
    if (event.results[i].isFinal) {
      final_transcript += event.results[i][0].transcript;
    } else {
      interim_transcript += event.results[i][0].transcript;
    }
  }
  final_transcript = capitalize(final_transcript);
  final_span.innerHTML = linebreak(final_transcript);
  interim_span.innerHTML = linebreak(interim_transcript);

};

这个回调函数,会把目前接收到的结果链接成两个字符串:final_transcript和interim_transcript。在结果中可能包含”\n”,例如用户有可能会说”new paragraph”,因此我们使用line break函数将这转换成HTML标记
或者

。最后,把这些字符串设为对应元素的interHTML:final_span的是黑色文本,而interim_span的是灰色的。

interim_transcript是一个局部变量,每次这个事件触发时都会重新计算这个字符串,这样的话,在最终结果出现之前,可以覆盖之前可能的结果。我们虽然可以用同样的方式来处理final_transcript,但是因为最终的结果是不变的,所以我们在这里把final_transcript定义成一个全局变量,可以让程序更有效率一点,这样的话,就可以从event.resultIndex开始循坏,至增加新的递增的结果。

好了,剩下的代码纯粹就是为了漂亮。处理处理状态,为用户显示一些有用的消息,还有就是在麦克风按钮上切换GIF图片,要么是静态的麦克风,语音比较弱的图片,和一张一闪一闪的红点动画图片。

recognition.start()被调用后,显示mic-slash image,当onstart事件触发后就换成mic-animate的。这些变化常常非常快,slash很难被注意到。但是第一次使用语音识别时,Chrome需要向用户获取使用麦克风的权限,在这种情况下,只有用户授权了onstart事件才会触发。使用HTTPS的页面无需反复申请权限,而HTTP的则需要。

赶紧为你的网站赋予生命,倾听用户吧!

非常愿意听到你的反馈……

原文:http://updates.html5rocks.com/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API

0
推荐阅读