AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
来源:互联网 发布:淘宝店不开了怎么注销 编辑:程序博客网 时间:2024/06/05 18:55
在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)
- 正则表达式知识点整理
- IOCP模型与EPOLL模型的比较
- svn报错:Cannot negotiate authentication mechanism
- MongoDB学习(三)——mongofiles实现GridFS
- 面向对象地分析Linux内核设备驱动(1):——Linux内核驱动中面向对象的基本规则和实现方法
- AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
- MongoDB的安装以及连接(windows)
- 蓝桥杯算法训练:现日期计算X天后日期
- Android Things:来跑一个Demo耍耍
- 解决在VS2013中使用scanf和printf的报错
- android中ContentProvider+ContentResolver示例
- 特征点检测学习_2(surf算法)
- Android View事件分发、拦截、消费机制
- Volley的简单应用