怎么在输入框旁边添加小话筒？

html

现在很多网站陆续出现了搜索框边上一个小话筒的语音输入功能。不过目前只有Chrome 11及以上版本才支持。可以用chrome浏览器在试试效果，本人用的360浏览器也支持。检查浏览器是否支持：

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

实现此功能，为input添加名为 x-webkit-speech 的属性就行了。

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

其他属性：

设置语言种类：
<input type="text" x-webkit-speech lang="zh-CN" />

语音输入事件，当发声语音改变时触发：
<input type="text" x-webkit-speech onwebkitspeechchange="foo()" />

语音输入语法，”builtin:search”值使得语音输入的内容尽量靠近搜索内容，去除多余的字符，例如“的”，“啊”
<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />

还有个值：”builtin:translate”看到taobao在用，但目前还不清楚是什么意义，有时间再仔细看看W3C的文档。

该服务需要走google的服务器所以有时响应速度很慢，每次测试都是提示“麦克风无法使用”的情况，猜测可能存在一些硬件兼容性问题。总的来说是趣味性大于实用性；比较期待能在手机浏览器上实现这个功能，可以做一些比较有趣的应用。

摘自http://www.iinterest.net/2012/01/07/x-webkit-speech/