天行博客

使用Chrome浏览器的同学应该会经常看到一些网站的搜索框右边有一个麦克风的标志，点击图标后即可连接麦克风进行语音识别搜索，那么这是如何实现的呢？

其实非常简单，这是html5下一个新的属性，通过调用google的语音服务api，用于支持网页内的语音识别输入功能。

只需要在输入框的input上添加一个x-webkit-speech 属性就可以了。

如本博客的搜索框：

<input type="text"  name="edtSearch" x-webkit-speech id="edtSearch" value="Search...." onfocus="if (this.value == 'Search....') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search....';}" />

另外它还可以添加以下属性：

语言种类： lang="zh-CN"

发声改变时触发相关语音识别：onwebkitspeechchange="foo()"

让语音输入的内容更加精确尽量接近搜索内容：x-webkit-grammar="bUIltin:search"

通过平时的使用感觉如果发音清晰的话，识别率还算不错。这是google应用于Chrome浏览器上的一项实验性功能，以上属性同样也对webkit内核浏览器生效。

相关W3C标准参考文档：http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html