以前语音输入功能虽然没用过,但是看上去很高级的样子,有了智能手机之后,在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"
x-webkit-speech
/>
简单的来说,我们只要在input元素上加上x-webkit-speech属性就可以了,当然你如果用xhtml,那么标准的写法是:x-webkit-speech=”x-webkit-speech”;
<input id=
"q"
name=
"q"
x-webkit-speech=”x-webkit-speech”
/>
其他属性:
lang
设置语言种类:
lang=
"zh-CN"
x-webkit-grammar
语音识别语法,取值:
- translations—说一个词,并把它翻译
- definitions—说一个词,并且获得定音
- directions—说一个地址,要求行车路线
- dictation
事件
onwebkitspeechchange
语音输入事件,当发声语音改变时触发: