Chrome下的语音控制框架MyVoix.js使用篇（四）
在上一篇博文中，我为大家介绍了myvoix.js中的smart learning模块，以及何如使用该功能。（myvoix.js的源码地址会在每一篇文章末尾放出）
文本将拓展 Chrome下的语音控制框架MyVoix.js使用篇（二） 中的实例（没看过的同学请猛戳链接），具象地介绍smart learning模块的使用。在之前的实例中，我们通过语音输入，让 Hello My Voix 标题变化成各种颜色， 并且通过预存指令来增加语音指令的识别率。在本文中将去除预存指令这一块，通过smart learning模块来接收用户不同口音的发音。
首先，我们增加了一个按钮，用来控制smart learning的开启关闭，还有一个标签用来记录smart learning模块的运行情况。
界面代码和截图如下：
<body>
<h1>Hello My Voix</h1>
<input type='button' value="start" />
<p>0</p>
</body>
本例中，我们仅对'red'一词进行smart learning的测试，减少UI代码的逻辑复杂性。读者在明白smart learning使用方法后，可自行创建完善的UI。
本页面玩法如下：
1）点击"start"按钮， 开启smart learning。 这时候用户的语音输入都会被smart learning关联到red一词上。"start"按钮会变成"stop"按钮。
2）每次用户有语音输入，按钮下方的数字都会+1。
3）点击"stop"按钮， 关闭smart learning。 按钮下方计数会清0，用户再进行语音输入的时候，就会使标题变色。
附上javascript部分代码：
window.onload=function(){
var _myVoix = new MyVoix(undefined,undefined,true),
_title=document.getElementsByTagName('H1')[0],
_btn=document.getElementsByTagName('INPUT')[0],
_tag = document.getElementsByTagName('P')[0],
_colors=['red','black','blue','green','yellow'];
_myVoix.start();
for(var i=0,l=_colors.length;i<l;i++){
(function(i){
_myVoix.bind(_colors[i],function(){
_title.style.color=_colors[i];
});
})(i);
}
_btn.onclick=function(){
if(_btn.value==='stop'){
_tag.innerHTML= '0';
_myVoix.CurrentLearning = undefined;
_btn.value='start';
}else{
_myVoix.CurrentLearning = 'red';
_btn.value='stop';
}
};
_myVoix.onLearning=function(){
_tag.innerHTML= +_tag.innerHTML+1;
};
};
有了代码，明白了页面的功能，我们就可以简单的测试了。建议各位同学打开控制台监控语音的输入。
如图所示，点击start按钮后，我们输入了5个语音指令，分别被google解析成了'red','ride','ride','bento','red'。然后我们点击stop按钮，再次输入语音指令，当google把我们的输入解析成'ride','bento'的时候，我们的标题也会变红。
Smart learning的本质，其实就是关联一组命令到一个语音指令。所以在实际应用中，我们还可以使用smart learning来让用户自定义语音指令。
上图中，我将hi指令关联到了red指令，对着话筒说句hi，就让标题变红了。
到此为止，同学们应该已经能够使用myvoix.js开发一些简单的应用了。在本系列之后的文博中，我会为大家解析myvoix.js的数据结构，进步一介绍myvoix的精髓所在。
转发请注明出处：http://www.cnblogs.com/Arthus/p/3708502.html
Chrome下的语音控制框架MyVoix.js使用篇（四）的更多相关文章
- Chrome下的语音控制框架MyVoix.js使用篇（三）
上篇文末已经提及,google分析出的单词可能和大家预想的输入有差别.上文我们通过预先绑定多个语音指令,权益地解决了这个问题.在这一章,我将介绍myvoix.js框架自带的smart learning ...
- Chrome下的语音控制框架MyVoix.js使用篇（一）
日前因工作需求,着手研究了语音识别技术,发现github上有网友发布了一款叫做voix.js的javascript框架.在拜读voix.js的源码后发现了不少问题,于是自己写了一款语音识别框架MyVo ...
- Chrome下的语音控制框架MyVoix.js使用篇（二）
上一篇博文中,初步介绍了MyVoix.js的基本功能,这次我们将演示一个完整的实例. 先上代码 <!DOCTYPE HTML> <html> <head> < ...
- 关于 IE firefox Chrome下的通过用js 关闭窗口的一些问题
首先IE是可以通过window.close()来关闭浏览器窗口的,但是在firefox和Chrome下是无效的,原因在于: ~~~ie可直接<button onclick="windo ...
- 语音控制的tab选项卡
前端开发whqet,csdn,王海庆,whqet,前端开发专家 ladies and 乡亲们,程序猿同志们,周末仍然坚守工作岗位,或者学习不辍的童鞋们,福音来了. 语音识别高不高端.难不难? 今天给大 ...
- H5案例分享：JS手势框架 —— Hammer.js
JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...
- OMCS ——卓尔不群的网络语音视频框架
作为.NET平台上的开发人员,要开发出一个像样视频聊天系统或视频会议系统,非常艰难,这不仅仅是因为.NET对多媒体的支持比较有限,还因为网络语音视频这块涉及到了很多专业方面的技术,而.NET在这些方面 ...
- 一款很便捷很实用的框架——vue.js
Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...
- Web前端三大框架_angular.js 6.0（二）
Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0 1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...
随机推荐
- Java---多线程之死锁
★ 死锁的两种情况: 简单的说下单块cpu运行多线程的情况: 大家可能平时玩电脑,可以同时挂QQ啊,玩游戏啊,打开文本啊,等等.这里,我们假设是单块cpu.也就是俗称的单核cpu. 大家可能会觉得这些 ...
- mongodb清洗数据
1,数据库连接超时:DBPool的连接时的配置: 自己进行设置: MongoClientOptions mco = new MongoClientOptions.Builder() ...
- 如何计算Java对象占用了多少空间？
在Java中没有sizeof运算符,所以没办法知道一个对象到底占用了多大的空间,但是在分配对象的时候会有一些基本的规则,我们根据这些规则大致能判断出来对象大小. 对象头 对象的头部至少有两个WORD, ...
- Java中对象的上转型对象
1. 定义 如果B类是A类的子类或间接子类,当用B类创建对象b并将这个对象b的引用赋给A类对象a时,如: A a;a = new B();ORA a;B b = new B();a = b; 则称A类 ...
- ASP.NET页面同时发起多个ajax请求，出现阻塞情况
解决办法:假如页面对Session只读不写,可以在页面的开头加上EnableSessionState="ReadOnly".
- Linux控制台下的快捷键
Linux控制台(文本模式)下提高工作效率的快捷键 在Linux环境里,有一些按键有特殊的含意.# Ctrl-U: 擦除一行光标前面的部分.# Ctrl-H: 擦除光标前面的一个字符.# Ctrl-D ...
- Python 的数据类型
列表 #coding=utf-8 students=["小明","小华","小李","小娟","小云" ...
- iis7 发布mvc 遇到的HTTP错误 403.14-Forbidden Web 服务器被配置为不列出此目录的内容
iis 7上发布mvc报错:403.14-Forbidden Web 服务器被配置为不列出此目录的内容 提示里面的解决方法是: 如果不希望启用目录浏览,请确保配置了默认文档并且该文件存在. 使用 II ...
- MVC项目，系统找不到指定的文件。（异常来自 HRESULT:0x80070002）
今天在用Visual Studio新建MVC项目的时候,遇到错误 系统找不到指定的文件.(异常来自 HRESULT:0x80070002) 解决办法:工具--> 扩展和更新 -->联机(V ...
- JAVA小项目之摇奖机
功能: 点击”摇杆“开始: 两种结束滚动方式,A:点击”摇杆“ B:分别点击 对应结果框的按钮: 实现最后减速停下来效果,模拟真实摇奖机. 知识点:A.线程的控制,B.图片轮播原理 效果图: 窗口 ...