AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
来源:互联网 发布:成为算法工程师 编辑:程序博客网 时间:2024/05/31 15:19
在AngularJS应用中集成科大讯飞语音输入功能
前言
根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示:
涉及的源代码如下所示:
<button ng-click="startRecognize()"><i class="icon ion-mic-a " ></i></button> //语音识别$rootScope.startRecognize = function() {var speech;var options = {}; //语音识别参数,用于控制语音引擎的各种技术参数options.engine = 'iFly';options.userInterface = 'false';text = "";plus.speech.startRecognize(options, function(s) {text += s;console.log(text);text = text.replace(',', '').replace('。', '').replace('?', '');$scope.$apply(function() {$rootScope.medname= text;$scope.searchMed(2, $rootScope.medname)});}, function(e) {$ionicLoading.show({template: "语音输入失败,请重新尝试"});setTimeout(function() {$ionicLoading.hide();}, 2000);});setTimeout(function() {plus.speech.stopRecognize();}, 10000); //超时语音结束}
其中涉及到使用ionic框架中的按钮组件。
其云端打包授权功能需要到第三方开发平台申请应用后获取相关配置参数。集成过程与微信授权认证差不多。
添加第三方登录模块
可视化界面配置
首先是需要添加第三方登录模块,双击应用的manifest.json文件:
切换到“模块权限配置”项,在“未选模块”中选择“Speech(语音输入)”添加到“已选模块”:
代码视图配置
切换到“代码视图”项,在permissions节点下添加如下Speech节点数据:
"Speech": {"description": "语音输入"}
效果如下所示:
(说明:点击“语音输入按钮”后,弹出录音识别界面,在说出“感冒”一词后将识别出的文字填充在输入栏中,同时搜索相关药品,搜索结果如上图右所示。)
优化
优化点主要存在两个地方:
1.icon图标过于丑陋
2.将语音输入icon集成进input输入栏,如下图所示(UC Browser):
3.存在版本兼容问题。有些手机不支持此插件。
首先第一个问题属于美工干的活。但自己似乎应该给其预留出应有的填补空间才对。优化后的效果如下图所示(感觉还是很丑):
第二个问题,解决起来似乎有一定的难度。自己只能够慢慢摸索。
第三个问题暂时得不到解决。
附:button设置图片
<button style="width:40px; height:38px; white-space: normal; padding:12px; padding-left:20px; background:none; background: url(img/btnbg.png) no-repeat -2px -2px;" ng-click="startRecognize()"><!--<i class="icon ion-mic-a " ></i>--></button>
参考文献:
http://www.runoob.com/ionic/ionic-icon.html
http://www.html5plus.org/doc/zh_cn/audio.html
http://www.html5plus.org/doc/zh_cn/speech.html#plus.speech.SpeechRecognizeOption
美文美图
- AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
- AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
- AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
- AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
- AngularJS进阶(十七)在AngularJS应用中实现微信认证授权遇到的坑
- 在 angularjs 中集成 bootstrap typeahead
- 集成科大讯飞语音听写功能
- 应用中添加讯飞语音功能
- 在AngularJS应用中实现认证授权
- 在AngularJS应用中实现认证授权
- 在AngularJS应用中实现认证授权
- 科大讯飞语音集成
- angularjs进阶
- 如何在 ASP.NET MVC 中集成 AngularJS(1)
- 如何在 ASP.NET MVC 中集成 AngularJS(1)
- 如何在 ASP.NET MVC 中集成 AngularJS(2)
- 如何在 ASP.NET MVC 中集成 AngularJS(3)
- 如何在 ASP.NET MVC 中集成 AngularJS(3)
- PAT乙级 A+B和C (15)
- 效率至上
- 来发背包开开胃
- PAT乙级 数字分类 (20)
- 2015广东工业大学新生赛 总结+部分题解
- AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
- 纯java时钟
- 如何评价rcnn、fast-rcnn和faster-rcnn这一系列方法?
- 选课大作战
- android studio 获取 应用签名(SHA1 MD5 )方法
- 你不得不读的书籍清单
- 最长01串
- spark源码编译
- matlab卷积相关