目录 搜索
导论 前言 为什么学习JavaScript JavaScript的历史 基本语法 语法概述 数值 字符串 对象 数组 函数 运算符 数据类型转换 错误处理机制 JavaScript 编程风格 标准库 Object对象 包装对象和Boolean对象 Number对象 String对象 Math对象 Date对象 RegExp对象 JSON对象 ArrayBuffer:类型化数组 面向对象编程 概述 封装 继承 模块化编程 DOM Node节点 document节点 Element对象 Text节点和DocumentFragment节点 Event对象 CSS操作 Mutation Observer 浏览器对象 浏览器的JavaScript引擎 定时器 window对象 history对象 Ajax 同域限制和window.postMessage方法 Web Storage:浏览器端数据储存机制 IndexedDB:浏览器端数据库 Web Notifications API Performance API 移动设备API HTML网页元素 Canvas API SVG 图像 表单 文件和二进制数据的操作 Web Worker 服务器发送事件 Page Visibility API Fullscreen API:全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components HTML网页的API HTML网页元素 Canvas API SVG 图像 表单 文件和二进制数据的操作 Web Worker 服务器发送事件 Page Visibility API Fullscreen API:全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components 开发工具 console对象 PhantomJS Bower:客户端库管理工具 Grunt:任务自动管理工具 Gulp:任务自动管理工具 Browserify:浏览器加载Node.js模块 RequireJS和AMD规范 Source Map JavaScript 程序测试 JavaScript高级语法 Promise对象 有限状态机 MVC框架与Backbone.js 严格模式 ECMAScript 6 介绍 附录 JavaScript API列表
文字

    • 概述

    • SpeechRecognition对象

    • 事件

    • 参考链接

概述

这个API用于浏览器接收语音输入。

它最早是由Google提出的,目的是让用户直接进行语音搜索,即对着麦克风说出你所要搜索的词,搜索结果就自动出现。Google首先部署的是input元素的speech属性(加上浏览器前缀x-webkit)。

<input id="query" type="search" class="k-input k-textbox" 
 x-webkit-speech speech />

加上这个属性以后,输入框的右端会出现了一个麦克风标志,点击该标志,就会跳出语音输入窗口。

由于这个操作过于简单,Google又在它的基础上提出了Web Speech API,使得JavaScript可以操作语音输入。

目前,只有Chrome浏览器支持该API。

SpeechRecognition对象

这个API部署在SpeechRecognition对象之上。

var SpeechRecognition = window.SpeechRecognition || 
                        window.webkitSpeechRecognition || 
                        window.mozSpeechRecognition || 
                        window.oSpeechRecognition || 
                        window.msSpeechRecognition;

为了将来的兼容性考虑,上面的代码列出了所有浏览器的前缀。但是实际上,目前只有window.webkitSpeechRecognition是可用的。

确定浏览器支持以后,新建一个SpeechRecognition的实例对象。

if (SpeechRecognition) {       
  var recognition = new SpeechRecognition();
  recognition.maxAlternatives = 5;
}

maxAlternatives属性等于5,表示最多返回5个语音匹配结果。

事件

目前,该API部署了11个事件。下面对其中的3个定义回调函数(假定speak是语音输入框)。

var speak = $('#speak');

recognition.onaudiostart = function() {
  speak.val("Speak now...");
};

recognition.onnomatch = function() {
  speak.val("Try again please...");
};

recognition.onerror = function() {
  speak.val("Error. Try Again...");
};

首先,浏览器会询问用户是否许可浏览器获取麦克风数据。如果用户许可,就会触发audiostart事件,准备接收语音输入。如果找不到与语音匹配的值,就会触发nomatch事件;如果发生错误,则会触发error事件。

如果得到与语音匹配的值,则会触发result事件。

recognition.onresult = function(event) { 

  if (event.results.length > 0) { 

    var results = event.results[0], 
        topResult = results[0];    if (topResult.confidence > 0.5) {
      speechSearch(results, topResult);
    } else {
      speak.val("Try again please...");
    }
  }
};

result事件回调函数的参数,是一个SpeechRecognitionEvent对象。它的results属性就是语音匹配的结果,是一个数组,按照匹配度排序,最匹配的结果排在第一位。该数组的每一个成员是SpeechRecognitionResult对象,该对象的transcript属性是实际匹配的文本,confidence属性是可信度(在0与1之间)。

参考链接


上一篇: 下一篇: