经常逛淘宝不知道多少人用过淘宝搜索栏的语音搜索。（如下图黄色方框所示）。

然而今天无意间看到了语音搜索，起初我以为会很复杂，搜索了一下才发现代码如此之简单，html5的功能如此之强大。其实只需一行代码就可搞定：

x-webkit-speec

但是语音搜索只适合语音搜索只支持webkit内核浏览。

先看代码：

然后我们可以看一下运行结果：（这种效果显示为360浏览器）

此效果为firefox浏览器，就像普通文本框一样。

示例：

解释一下参数的含义：

x-webkit-speech：就是让输入框的右边出现一个小话筒，该效果表示的是语音功能。

lang：就是强制输入框里面的语音的语言种类，例如上面例子里表示的是lang=“zh-CN”指的是简体中文。

x-webkit-grammar：指的是语音输入语法，"builtin:search”值使得语音输入的内容尽量靠近搜索内容，去除多余的字符。