
[javascript] view plain copy print?
<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": "语音输入"}
效果如下所示:
(说明:点击“语音输入按钮”后,d出录音识别界面,在说出“感冒”一词后将识别出的文字填充在输入栏中,同时搜索相关药品,搜索结果如上图右所示。)
优化
优化点主要存在两个地方:
1.icon图标过于丑陋
2.将语音输入icon集成进input输入栏,如下图所示(UC Browser):
3.存在版本兼容问题。有些手机不支持此插件。
首先第一个问题属于美工干的活。但自己似乎应该给其预留出应有的填补空间才对。优化后的效果如下图所示(感觉还是很丑):
第二个问题,解决起来似乎有一定的难度。自己只能够慢慢摸索。
第三个问题暂时得不到解决。
附:button设置图片
[html] view plain copy print?
<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>
1、首先打开手机主界面,然后选择点击“设置”选项,如下图所示。
2、打开设置界面之后,选择点击“通用”选项,如下图所示。
3、进入通用界面之后,选择点击”键盘“选项,如下图所示。
4、最后打开”启用听写“后面的开关按钮即可。
1.我们打开手机上的百度浏览器。2.来到了百度浏览器首页,我们点击下方的“未登录”。3.在百度浏览器主页这,我们点击下方的“设置”。4.在百度浏览器设置这里,我们点击“语音搜索”。就可以了手机浏览器是运行在手机上的浏览器,可以通过GPRS进行上网浏览互联网内容,用户通过地址栏向万维网服务器发送各种请求,并对从服务器发来的超文本信息和各种多媒体数据格式进行解析、渲染和显示。手机浏览器是一种用户在手机终端上通过无线通讯网络进行互联网内容浏览的移动互联网工具,其最主要的应用为网页浏览,同时也可以聚集大量的应用,如导航、社区、多媒体影音、天气、股市等,为用户提供全方位的移动互联网服务。
语音输入是根据 *** 作者的讲话,电脑识别成汉字的输入方法(又称声控输入)。它是用与主机相连的话筒读出汉字的语音。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)