标签:javascript 语音识别 语音控制 tab选项卡 annyang
ladies and 乡亲们,程序员同志们,周末仍然坚守工作岗位,或者学习不辍的童鞋们,福音来了。
语音识别高不高端、难不难?
今天给大家推荐一个简单易用的js实现的语音识别框架annyang,然后一个案例示范使用。
annyang是一个能够实现语音识别的js类库,小巧易用(仅仅2k),兼容中文。接下来我们看看怎么使用。
首先导入该annyang库,可以使用CDN的方式,也可以下载来使用。
<!--下载到本地使用--> <script src="js/annyang.min.js" type="text/javascript" charset="utf-8"></script> <!--cdn方式使用--> <script src="https://www.talater.com/annyang.min.js" type="text/javascript" charset="utf-8"></script>然后我们就可以在js里使用该类库了,开始之前我们需要判断annyang对象是否存在。
// 首先判断 annyang对象是否存在 if (annyang) { // 语音识别命令判断 } else{ // 错误提示信息 }annyang通过设置命令、语音识别匹配命令的方式的进行工作,具体的使用代码如下。
// 首先判断 annyang对象是否存在 if (annyang) { // 语音识别命令判断 // 定义命令 var commands = { ‘go‘: function() { window.location.href="http://blog.csdn.net/whqet/"; }, }; //设置设别语言 annyang.setLanguage(‘zh-cn‘); //打开调试 //annyang.debug(‘on‘); // 添加命令 annyang.addCommands(commands); // 启动语音识别,也可以绑定在事件上 annyang.start(); }else{ // 错误提示信息 }annyang的基本使用就这样,我们来看看今天的这个tab,具体的实现过程如下。
html
<ul class="tabs"> <li class="active" rel="tab1">新闻</li> <li rel="tab2">通知</li> <li rel="tab3">公告</li> <li rel="tab4">备注</li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <h2>新闻</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus augue.</p> </div> <!-- #tab1 --> <div id="tab2" class="tab_content"> <h2>通知</h2> <p>Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.</p> </div> <!-- #tab2 --> <div id="tab3" class="tab_content"> <h2>公告</h2> <p>Nulla eleifend felis vitae velit tristique imperdiet. Etiam nec imperdiet elit. Pellentesque sem lorem, scelerisque sed facilisis sed, vestibulum sit amet eros.</p> </div> <!-- #tab3 --> <div id="tab4" class="tab_content"> <h2>备注</h2> <p>Integer ultrices lacus sit amet lorem viverra consequat. Vivamus lacinia interdum sapien non faucibus. Maecenas bibendum, lectus at ultrices viverra, elit magna egestas magna, a adipiscing mauris justo nec eros.</p> </div> <!-- #tab4 --> </div> <!-- .tab_container -->css
ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #333; width: 100%; } ul.tabs li { float: left; margin: 0; cursor: pointer; padding: 0px 21px; height: 31px; line-height: 31px; border-top: 1px solid #333; border-left: 1px solid #333; border-bottom: 1px solid #333; background-color: #666; color: #ccc; overflow: hidden; position: relative; } .tab_last { border-right: 1px solid #333; } ul.tabs li:hover { background-color: #ccc; color: #333; } ul.tabs li.active { background-color: #fff; color: #333; border-bottom: 1px solid #fff; display: block; } .tab_container { border: 1px solid #333; border-top: none; clear: both; float: left; width: 100%; background: #fff; overflow: auto; } .tab_content { padding: 20px; }js,这里用到了jquery,annyang
$(document).ready(function(){ //普通tab,单击控制 $(".tab_content").hide(); $(".tab_content:first").show(); $(‘ul.tabs li‘).last().addClass("tab_last"); $("ul.tabs li").click(function() { $(".tab_content").hide(); $(".tab_content").eq($(this).index()).show(); $("ul.tabs li").removeClass("active"); $(this).addClass("active"); }); // 语音控制,首先判断 annyang对象是否存在。 if (annyang) { // 定义语音控制命令里使用的函数,切换tab var showTab=function(i){ $(".tab_content").hide(); $(".tab_content").eq(i).show(); $("ul.tabs li").removeClass("active"); $("ul.tabs li").eq(i).addClass("active"); }; // 定义命令 var commands = { ‘新闻‘: function(){showTab(0)}, ‘通知‘: function(){showTab(1)}, ‘公告‘: function(){showTab(2)}, ‘备注‘: function(){showTab(3)}, }; // 设置语言,默认为en annyang.setLanguage(‘zh-cn‘); // 可选设置,调试功能打开,建议开发阶段打开 annyang.debug(); // 添加命令 annyang.addCommands(commands); // 开始侦听annyang,也可以绑定在事件上 annyang.start(); } })
----------------------------------------------------------
前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------
标签:javascript 语音识别 语音控制 tab选项卡 annyang
原文地址:http://blog.csdn.net/whqet/article/details/26934241