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


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流