x-webkit-speech实现语音搜索

该属性只在chrome11中有效,你可以用chrome打开试试看

实现方法就是在input里面添加一个x-webkit-speech。代码如下

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

如果浏览器支持这个属性的话,则会在输入框的右边出现一个小话筒,点击小话筒说话,或者可以使用聚焦在输入框中,并用快捷键Ctrl+Shift+.来启动

x-webkit-speech-demo

你可以通过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!
}

这个语音是怎么识别工作,下面这张图很好地说明了这个

diagram

相关的属性设置:
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中遇到提示“麦克风无法使用”的情况,猜测可能存在一些硬件兼容性问题。总的来说是趣味性大于实用性;比较期待能在手机浏览器上实现这个功能,可以做一些比较有趣的应用。

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:x-webkit-speech实现语音搜索 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/x-webkit-speech.html)

发表评论

请登录后发表评论: