Chrome — 让<input>标签支持语音搜索 x-webkit-speech

使用Chrome浏览器且细心的骚年应该都会发现一些大的网站已经有了语音搜索功能了，例如淘宝、360搜索等等。不过只有Chorme11以上才能够支持。      

实现起来非常简单，为input添加名为 x-webkit-speech 的属性就行了。

可以用Chrome浏览器点击话筒体验一下语音搜索。

 相关属性设置：

设置语言种类：lang

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

设置发声语音改变时触发：onwebkitspeechchange

<input type="text" x-webkit-speech onwebkitspeechchange="foo()" />

语音输入语法，”builtin:search”值使得语音输入的内容尽量靠近搜索内容，去除多余的字符，例如“的”、“啦”：x-webkit-grammar

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

需要注意的是，这个语音识别实际上是调用谷歌的api，语言识别率还不错，因为需要走google的服务器。所有有时候会遇到加载很慢的情况。就现阶段来说，这个功能暂时还只能说趣味性大于实用性。

另外，就是当具有语音搜索的页面是iframe页面时，点击麦克风后，“请开始说话”这浮动层就不跟随input输入框了。