[置顶] 关于x-webkit-speech 语音输入功能体验与小结

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

我实验了几次，例如我在淘宝语音“ 诺基亚 Windows 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" />