该属性只在chrome11中有效,你可以用chrome打开试试看
实现方法就是在input里面添加一个x-webkit-speech。代码如下
<input type="text" x-webkit-speech/>
如果浏览器支持这个属性的话,则会在输入框的右边出现一个小话筒,点击小话筒说话,或者可以使用聚焦在输入框中,并用快捷键Ctrl+Shift+.来启动
你可以通过javascript测试webkitSpeech是否支持语音输入,属性的值是一个布尔值
// Enable
element.webkitSpeech = true;
// Disable
element.webkitSpeech = false;
语音标签并不适应于所有的HTML5 input标签,在这个测试中,我们可以看到text/number和tel支持语音输入,而email、url、data、month都是不支持的。
检测浏览器是否支持这个属性,你可以通过以下的javascript代码
if (document.createElement('input').webkitSpeech === undefined) {
// Not supported
} else {
// Supported!
}
这个语音是怎么识别工作,下面这张图很好地说明了这个
相关的属性设置:
lang
设置语言种类:
<input type="text" x-webkit-speech lang="zh-CN" />
onwebkitspeechchange
语音输入事件,当发声语音改变时触发:
<input type="text" x-webkit-speech onwebkitspeechchange="foo()" />
x-webkit-grammar
语音输入语法,”builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如「的」
<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />
还有个值:”builtin:translate”看到taobao在用,但目前还不清楚是什么意义,有时间再仔细看看W3C的文档。
测试了下效果,语音识别率还不错,但中英夹杂的时候就很悲剧了,而且该服务需要走google的服务器所以有时响应速度很慢,另外在mac中遇到提示“麦克风无法使用”的情况,猜测可能存在一些硬件兼容性问题。总的来说是趣味性大于实用性;比较期待能在手机浏览器上实现这个功能,可以做一些比较有趣的应用。