ladies and 乡亲们，程序猿同志们，周末仍然坚守工作岗位，或者学习不辍的童鞋们，福音来了。
语音识别高不高端、难不难？
今天给大家推荐一个简单易用的js实现的语音识别框架，然后一个案例示范使用。
，。
annyang是一个能够实现语音识别的js类库，小巧易用(只2k)，兼容中文。接下来我们看看怎么使用。
首先导入该annyang库，能够使用CDN的方式，也能够下载来使用。
然后我们就能够在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
- 新闻
- 通知
- 公告
- 备注
新闻
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus augue.
通知
Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.
公告
Nulla eleifend felis vitae velit tristique imperdiet. Etiam nec imperdiet elit. Pellentesque sem lorem, scelerisque sed facilisis sed, vestibulum sit amet eros.
备注
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.
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(); }}) 
----------------------------------------------------------
，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------