使用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