使用x-webkit-speech令网站支持语音输入功能

今天仔细看了看163邮箱，发觉搜索框有个小麦克风标志，联想在词霸也见过类似标志，突然生成好奇心用Chorme分析了一个源代码发现了个属性：x-webkit-speech和onwebkitspeechchange，接着Google了一下才知道是HTML5下的属性，通过使用google的语音服务支持语音输入功能。

Google搜索的语音输入功能：

检测浏览器是否支持

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

下面说下怎么实现，其实很简单。

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

就一句，当然还有别的属性可以添加:

lang

设置语言种类： 

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

onwebkitspeechchange

语音输入事件，当发声语音改变时触发： 

1 <input type="text" x-webkit-speech onwebkitspeechchange="foo()" />
2
3 function foo(){
4   alert('changed');
5 }

x-webkit-grammar

语音输入语法，”  builtin:search”值使得语音输入的内容尽量靠近搜索内容，去除多余的字符，例如「的」 

1 <input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />

PS : 如果原input中value不为空，输入会直接添加在原有文字后面。既然用webkit就要用placeholder了，不要再使用value为作输入提示了。 

W3C标准见： http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html