Chrome下语音识别实现页面快速引导以及重要交互

这篇文章发布于 2013年05月22日,星期三,01:02,归类于 JS实例。 阅读 51671 次, 今日 2 次 4 条评论

 

一、关于Chrome语音识别的实际应用

差不多去年这个时候,介绍了装B神奇,“HTML5语音识别”,给文本框加几个属性就能实现Chrome浏览器下的语音输入效果。

例如,用在搜索框上,可能就会有下图所示的模样:
搜索的语音识别

就在上周,我突然有了其他的想法。既然Chrome浏览器有语音可以识别中文,那用户岂不是可以借助这个实现一些无键盘输入操作的引导,提高交互体验。

比方说有这么一个场景:用户想查看自己的积分,但是,首页或其他常规页面是看不到积分的,用户需要进入用户中心才能知道自己的积分。对于开发者的我们或者互联网的熟客可以迅速找到积分,但是,对于生手的新用户而言,他在首页上转来转去找不到“积分”相关的链接,岂不是很焦急,有可能就会火大。如果这个时候,页面固定位置有个语言帮助按钮,点击,直接嘴巴说:“积分”,页面就自动跳到积分页面,岂不很好很赞!

跟同事讨论了下,觉得可行的,毕竟实现成本并不高,只在Chrome下有效(细小的改动不会引起老用户的强烈方案——对比这次的新版手机QQ用户的态度),于是,几小时的主动无偿加班,程序那边也积极配合,很快就上线了。

有成果出来了,东西讲起来就轻松多了。

在Chrome浏览器下,进入订餐小秘书上海站(注意,只有上海站才有)的首页餐厅预订页,右下方向会看到类似这样的东西:
语音识别的标志

点击,并嘴巴念到:“搜索”,则顶部的搜索框会获得焦点;如果说的是“搜索苏浙汇”,则页面会自动搜索“苏浙汇”;如果说“登录”,页面会自动弹出登录弹框(如果是点击进行登录,必须滚动到页面顶部);如果说的是“我的积分”,如果您当前是登录状态,则会跳转到“我的积分”页面;如果是非登录状态,则会有如下的提示(文字都是自己想的,如果有欠佳或更好的处理欢迎指出):
跳转之前的提示

页面间的跳转会有2秒钟的缓冲时间,在此期间你取消或者关闭弹框,则认为你改变了主意或者目的地不是你想去的,会停止即将进行的跳转。

还有很多其他隐藏的页面内交互和跳转,您有兴趣可以自己挖掘挖掘。

如果您语音的内容我们没有提供对应的行为,例如,盛夏是西瓜的季节,我们对着麦克风大声说:“西瓜”,会出现类似下面效果的提示:
西瓜没有对应的定位 张鑫旭-鑫空间-鑫生活

给大家提个醒,因为是Google的东西,伟大的china政府搞手脚,有时候语言识别会便秘。

二、借助Chrome语言实现创新交互的原理

1. CSS/HTML部分
带语音输入框的右侧会有一个语言的标志(上一段的两截图圈出来的那个),经自己的测试,在12像素字体大小下,文本框宽度限制为16像素集可以保证点击,又能让语言识别文字的能见性降低到很小。一些CSS的设置如下:

input { width:16px; border:0; background:none; color:transparent; outline:0; }

HTML部分就是去年语言搜索那篇文章提到的:

<input type="text" x-webkit-grammar="builtin:translate" x-webkit-speech />

2. JS部分
首先,因为只有Chrome浏览器有此功能,因此,我们需要做个浏览器判断,非Chrome浏览器回家准备过儿童节。如果您使用jQuery等框架,使用其中的API,如果都没有,可以使用如下代码简易快速判断webkit浏览器:

var isWebkit = typeof document.webkitHidden !== "undefined";

因为其实属于一个锦上添花的功能,我们无需急着加载显示出来。UI线程在进行的时候,JavaScript是休息的,因此,我们可以避开加载渲染的高峰;在一切都风平浪静之后,安然以异步方式加载语言相关的JS内容。

这个JS文件做的事情很简单:

  1. 再用户第一次点击语言图标时候,mousedown事件,加载全部页面跳转的配置文件,我们小秘书使用的是txt格式,JSONP请求,具体内容后面会展示。
  2. 语言文本框有一个onwebkitspeechchange事件,通过绑定该事件,我们就可以在语音输入结束之后根据语音的文字做相应的操作了。

    至于页面上的交互,每个站点都是不一样的,例如,我这里做了登录,城市切换,刷新,搜索等几个公共常用的;如果是淘宝网首页,可以是选项卡切换,手机充值等。

    但是,语言页面跳转可以是采用一致规则。小秘书的规则下面会介绍。

    需要注意的是,无论是页面内交互还是页面间跳转,每执行一次onwebkitspeechchange事件,都要把语言输入框的value值清空。否则可能有累加问题或文字显现问题。

  3. 没有了,就上面2点。

3. txt配置文件部分
下面是数据精简的配置文件,不过结构完整:

// 语音识别快速定位配置文件
window.configHelp = [{
    key: "会员中心",
    url: "/member/",
    needLogin: true
}, {
    key: "我的积分",
    url: "/member/account/MyPoints.aspx",
    needLogin: true
}, {
    key: "注册|快速注册",
    url: "http://passport.xiaomishu.com/regnew.aspx"    
}, 
// ... 诸如页面的省略
{
    key:"现金券|团购|现金券团购|优惠券",
    url:"http://t.xiaomishu.com/"
}];

key对应的就是我们可能说出来的关键字,因为多个关键字可能对应一个页面,因此,出现类似“手机版|手机下载|手机版下载|下载”这样的值就不足为奇了。

遍历数组,关键字再匹配,如果匹配(管道符分隔的任一关键字),结束遍历,执行响应的url地址跳转,否则,提示“没有找到相应的定位”。我们可以额外添加类似needLogin这样的参数,做一些额外的处理。

以上就是大致的原理。大家都是行家,应该一说就懂的。

三、结束语

小小总结下,说下自己的些看法。

语音快速引导的价值体主要现在下面3点:

  1. 深层级页面的快速访问。平时某个页面要3级才能访问,有了语言和对应的配置文件,直接首页嘴皮子动两下就进去了。如果有手写识别,同样也是适用的。
  2. 代替键盘输入操作。人总有惰性,很多人上网时候并不喜欢输入东西(慢思维,耗费精力),其更乐意直接点点就好了(快思维,直觉意识),这就是为什么浏览器厂商把新标签页变成了常用访问页面九宫格,点击远比输入网址来的快。语音也有同样的作用,因此,一些表单操作时候,例如验证码、或者页面内查找等,您可以想想是不是可以借助语音增强用户体验。
  3. 由于语音的不确定性,我们可以放很多很赞的彩蛋。例如,某人叫嚣道:“我爱前端”,得,弹出一个诸如“我是帅哥”的暗号,并写着:“兄弟,对小秘书有兴趣不,直接过来面试吧,报上暗号,老大亲面”!或者放“我爱XX”的伎俩来泡妹妹追女神之类。

很小的一个图标,里面是大大的世界,surprise往往来自刻意的用心而不是刻意的宣传。一切都是自己雏形idea大胆尝试,大家有没有什么自己的想法或者建议或者批评的话语,都非常非常欢迎提出来,一起讨论,一起学习。

渐进增强的好东西,我觉得您的网站也可以试一试的!

(本篇完)

分享到:


发表评论(目前4 条评论)

  1. bennyrice说道:

    他不支持英文么?我说了bag,出来百度。。

  2. 易X说道:

    鑫哥,你越发幽默了!

  3. wxycool说道:

    当找不到相应的内容时在本地网站直接搜索。。
    有点类似IPAD上的siri