浏览器一直用的Google Chrome，今天打开淘宝网站，无意中的看到搜索框旁边的语音搜索按钮，如下图所示：
查看分析网页源代码，
在input标签中有以下几行代码
xml 代码
01.x-webkit-speech x-webkit-grammar="builtin:translate"
做为拿来主义者，自己新建一个html文件，将以上的代码放到网页中，打开测试好用。再测试发现只在Google Chrome上通过，其它的IE，firefox,Opera上测试均不显示。
实际上w3c对语音输入有官方的说明：http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html
使用语音输入作用有：
1.提供除了键盘和鼠标的另一个输入方法，针对pc用户，当键盘不可用时也可以使用语音输入。
2.为手机用户提供更加方便的输入方法。
1.支持的浏览器
x-webkit-speech是webkit内核浏览器的私有属性(废话)。但现在只能在google的chrome 11以上才能使用。
实现过程大概是捕捉到语音后，数据发送到google的服务器进行语音识别，然后返回结果。所以没有足够强大大的研发能力和服务器资源，真没法支持这个服务。
2.支持的标签
输入标签有input和textarea，实际上目前只有input支持。
3.检测浏览器是否支持
javascript 代码
01.if (document.createElement("input").webkitSpeech === undefined) {
02. alert("Speech input is not supported in your browser.");
03.}
4.直接使用
为input标签加上x-webkit-speech属性
xml 代码
01.<input type="search" x-webkit-speech />
捕捉到语音输入后会直接将关键词填入到输入框里。
5.监听输入
若要监听输入变化以便做其他处理，使用onwebkitspeechchange属性添加处理函数。
xml 代码
01.<input type="search" x-webkit-speech onwebkitspeechchange="onChange()"/>
javascript 代码
01.<script type="text/javascript">
02. function onChange() {
03. alert('changed');
04. }
05.</script>
6.注意：
如果原input中value不为空，输入会直接添加在原有文字后面。既然用webkit就要用placeholder了，不要再使用value为作输入提示了。
7.相关属性
lang
设置语言种类：
xml 代码
01.<input type="text" x-webkit-speech lang="zh-CN" />
onwebkitspeechchange
语音输入事件，当发声语音改变时触发：
xml 代码
01.<input type="text" x-webkit-speech onwebkitspeechchange="foo()" />
x-webkit-grammar
语音输入语法，”builtin:search”值使得语音输入的内容尽量靠近搜索内容，去除多余的字符，例如「的」
xml 代码
01.<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />
还有个值：”builtin:translate”看到taobao在用，但目前还不清楚是什么意义，有时间再仔细看看W3C的文档。
测试了下效果，语音识别率还不错，但中英夹杂的时候就很悲剧了，而且该服务需要走google的服务器所以有时响应速度很慢，当然，对于我这种普通话不能很标准的人来使用，想达到很的效果，那真就是……
相关资料：
http://www.w3.org/TR/capture-api/
http://www.w3.org/TR/xhtml+voice/
http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html
http://slides.html5rocks.com/#speech-input
城市风+的BLOG ：http://www.csfplus.com/Blogs/WebUI/201205/20120501tr402k.Html
