很久前我曾经提到过Web Speech API，现在Chrome刚刚发布的25版本已经为桌面和Android提供了对此API的支持，这对Web开发者来说无疑是一个具有里程碑意义的事件，因为我们可以直接在Web App中原生使用语音识别技术，Web应用的新时代将会由此开启。

         控制不住激动的心情，下面我会通过示例马上给大家介绍此API的详细信息。

         Google专门提供了一个原生示例，来演示Web Speech API。


         我们来看看实现代码。首先需要判断浏览器是否支持Web Speech API，我们通过window下是否存在webkitSpeechRecognition对象来判断。如果支持，我们创建webkitSpeechRecognition对象，并设置相关属性和事件。

[html]  view plain copy
  1. if (!('webkitSpeechRecognition' in window)) {  
  2.   upgrade();  
  3. } else {  
  4.   var recognition = new webkitSpeechRecognition();  
  5.   recognition.continuous = true;  
  6.   recognition.interimResults = true;  
  7.   
  8.   recognition.onstart = function() { ... }  
  9.   recognition.onresult = function(event) { ... }  
  10.   recognition.onerror = function(event) { ... }  
  11.   recognition.onend = function() { ... }  
  12.   ...  

         continuous属性的默认值是false，代表当用户停止说话时，语音识别将结束。在这个演示中 ，我们将它设置为true，这样即便用户暂时停止讲话，语音识别也将会继续。

         interimResults属性的默认值也是false，代表语音识别器的返回值不会改变。在这个演示中，我们把它设置为true，这样随着我们的输入，识别结果有可能会改变。仔细观看演示，灰色的文字是临时性的，有时会改变，而黑色文本是最终结果，不会改变。

         当我们点击麦克风按钮时，会触发如下代码：

[html]  view plain copy
  1. function startButton(event) {  
  2.   ...  
  3.   final_transcript = '';  
  4.   recognition.lang = select_dialect.value;  
  5.   recognition.start();  

         我们用recognition.lang来设置语音识别的语言，在这个示例中默认为HTML页面的语言，通过下拉列表用户可以进行更换，例如“cmn-Hans-CN”代表普通话，而“en-us”代表美式英语。Chrome浏览器的语音识别支持众多的语言，非常强大。

         设置语言后，我们调用recognition.start()来激活语音识别。一旦开始捕获音频，它调用onstart方法，然后为每一个新的结果集调用onresult方法进行处理。

[html]  view plain copy
  1. recognition.onresult = function(event) {  
  2.   var interim_transcript = '';  
  3.   
  4.   for (var i = event.resultIndex; i < event.results.length; ++i) {  
  5.     if (event.results[i].isFinal) {  
  6.       final_transcript += event.results[i][0].transcript;  
  7.     } else {  
  8.       interim_transcript += event.results[i][0].transcript;  
  9.     }  
  10.   }  
  11.   final_transcript = capitalize(final_transcript);  
  12.   final_span.innerHTML = linebreak(final_transcript);  
  13.   interim_span.innerHTML = linebreak(interim_transcript);  
  14. };  

         这个handler把结果分成两个字符串：final_transcript和interim_transcript。这里调用Linebreak方法来进行分段。最后，它会将final_transcript设置为final_span的innerHTML，显示为黑色；而将interim_transcript设置为interim_span的innerHTML，显示为灰色。

         以上就是功能核心代码。当recognition.start()被调用时，麦克风识别动画开始显示，同时Chrome需要获得用户对麦克风的授权。有一点非常重要的是，HTTPS网页不需要反复获取授权，而HTTP网页需要。

         当开始语音输入、捕获和识别时，我们还会在桌面右下角看到相关提示。


         从现在开始，Web App的开发者们可以好好考虑考虑，利用Web Speech API能够开发出什么样有趣的产品，或者为自己的产品添加什么有趣的功能？

         提示：如果要体验文中的Demo，请使用Chrome 25以上的版本或者Chrome Canary。

         相关文章：《对HTML5 Device API相关规范的解惑》

         参考文章：VOICE DRIVEN WEB APPS: INTRODUCTION TO THE WEB SPEECH API

         转载请标明出处：蒋宇捷的专栏

Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区