html5语音输入功能speech属性

以前语音输入功能虽然没用过,但是看上去很高级的样子,有了智能手机之后,在ios和android中的语音输入,特别是iPhone的Siri,让一切变得如此简单,嘎嘎。
当然我不是在这里要实现如此强悍的功能,只是说说html5中的语音输入功能speech属性,大家先可以看看W3C文档:http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html
看上去很强大的样子,不过不要高兴的太早,因为大部分的浏览器还没有实现这些接口,目前可以用的只有chrome(11版本以上)的私有属性:x-webkit-speech。例如我们看看淘宝在chrome下的搜索框,如淘宝的语音搜索;

实现语音输入也非常简单:
<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
设置语言种类:

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

x-webkit-grammar
语音识别语法,取值:
translations—说一个词,并把它翻译
definitions—说一个词,并且获得定音
directions—说一个地址,要求行车路线
dictation

事件
onwebkitspeechchange
语音输入事件,当发声语音改变时触发:

<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>

转载《 html5语音输入功能speech属性

你可能感兴趣的:(html5)