`

关于x-webkit-speech 语音输入功能体验和总结

阅读更多

从今年开始很多网站的搜索按钮都逐渐改成了带有语音搜索的input文本框。从淘宝到各个小站,乃至于博客。网页上面右键查看源码,我们不难发现,其实它只是调用了Google的API而已。

我实验了几次,例如我在淘宝语音“ 诺基亚 Window Phone Lumia 900“,对于我这个南方口音,普通话不是绝对标准的人来说,能全部返回,并且能进行空格分词,从个人而言还是非常满意的。但是唯一的缺点是在网速不太给力的情况下,这个功能显然就成了摆设,不知道这个问题会有什么处理或者优化的办法。

x-webkit-speech是webkit内核浏览器的私有属性,因此目前也只能在Chrome 11和以上版本使用。应当是扑捉了语音后发送到Google的服务器进行识别和处理后,再返回结果首先说一个题外话,Chrome的市场份额无疑是这两年上升最快的浏览器,没有之一。可以发现基本每个礼拜都会有Chrome的更新版本,它的用户体验、程序效率和最新的功能体验,也正是因为不断的更新迭代才能得到充分的体现。谁让它是开源浏览器呢。

言归正传。其实想添加这个语音搜索非常简单,只需要为input添加名为 x-webkit-speech 的属性就行了。

检测浏览器是否支持:

if (document.createElement("input").webkitSpeech === undefined) {    
 alert("Speech input is not supported in your browser.");    
}

例,直接使用:

<input type="search" x-webkit-speech/>

设置语言的类型:

<input type="search" x-webkit-speech lang="zh-CN" />

监听输入:

若要监听输入变化以便做其他处理,使用onwebkitspeechchange属性添加处理函数。

<input type="search" x-webkit-speech onwebkitspeechchange="fun()" />

去字符:

语音输入语法,”builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如“的”,“啦”, "啊" 等等。

<input type="search" class="text"  x-webkit-speech x-webkit-grammar="bUIltin:search" />

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics