从今年开始很多网站的搜索按钮都逐渐改成了带有语音搜索的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" />
监听输入:
<input type="search" x-webkit-speech onwebkitspeechchange="fun()" />
语音输入语法,”builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如“的”,“啦”, "啊" 等等。
<input type="search" class="text" x-webkit-speech x-webkit-grammar="bUIltin:search" />