html5语音输入功能speech属性

日期：2013-11-22  来源：攀枝花惠康网络公司

实现语音输入也很是简单：

以前语音输入功能虽然没用过，可是看上去很高级的样子，有了智妙手机之后，在ios和android中的语音输入，出格是iPhone的Siri，让一切变得如斯简单，嘎嘎。

当然我不是在这里要实现如斯强悍的功能，只是说说html5中的语音输入功能speech属性，巨匠先可以看看W3C文档：http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html

<input id="q" name="q" accesskey="s" autofocus="true" autocomplete="off" x-webkit-speech  x-webkit-grammar="builtin:translate" />

简单的来说，我们只要在input元素上加上x-webkit-speech属性就可以了，当然你如不美观用xhtml，那么尺度的写法是：x-webkit-speech=”x-webkit-speech”；

<input  name="q"  x-webkit-speech />

其他属性：

lang
设置说话种类：

x-webkit-grammar
语音识别语法，取值：

• translations―说一个词，并把它翻译
• definitions―说一个词，而且获得定音
• directions―说一个地址，要求行车路线
• dictation
• …

事务

onwebkitspeechchange

语音输入事务，当发声语音改变时触发：

看上去很强年夜的样子，不外不要欢快的太早，因为年夜部门的浏览器还没有实现这些接口，今朝可以用的只有chrome（11版本以上）的私有属性：x-webkit-speech。例如我们看看淘宝在chrome下的搜索框，如图：

<form action="http://www.google.com/search" >
<input type="search" name="q" lang="zh-CN" x-webkit-speech x-webkit-grammar="builtin:search" onwebkitspeechchange="startSearch(event)"/>
</form>

<input lang="zh-CN" type="text" />

考试考试一下下面的语音搜索：http://www.css88.com/demo/speech/

嘎嘎。