微信小程序使用同声传译实现语音识别功能
更新时间:2021年6月2日 15:01 点击:2134
我使用同声传译语音识别功能是为了实现微信小程序首页的语音搜索功能,如果你也是那么恭喜你,你可以ctrl+c、ctrl+v再改一改,如果你不是那么你也不要着急的走可以看完我的文章会对你有所帮助!
首先是在微信公众平台(也就是小程序的后台),在左侧菜单栏中的设置-->第三方设置下的插件管理-->添加-->搜索同声传译-->点击添加
接下来就是在代码中进行添加一些设置。
如果你是使用微信开发者工具进行开发小程序的话,需要在app.json文件中添加一下代码。
// app.json { ... "plugins": { ... "WechatSI": { "version": "0.3.4", // 这是同声传译的版本(也可以在微信公众平台添加的同声传译查看最新版本) "provider": "wx069ba97219f66d99" // 这是同声传译的ID } } }
如果你是使用 Hbuildex 进行开发小程序的话,需要在 manifest.json 文件的源码视图中进行添加修改。
在源码视图中找到 mp-weixin,然后按照以下代码进行添加修改
// manifest.json /* 小程序特有相关 */ "mp-weixin": { "appid": "xxxxxxxxxx", // 这是你小程序的AppId ... "plugins": { "WechatSI": { "version": "0.3.4", // 这是同声传译的版本(也可以在微信公众平台添加的同声传译查看最新版本) "provider": "wx069ba97219f66d99" // 这是同声传译的ID } } }
做完以上步骤之后,就可以根据官方文档进行开发了
下面就是我的功能实现代码了
// index.vue 在这里我的页面布局只写了语音按钮(简化了) <template> <div @click="yuyin" class="yuyin-icon"> <img :src="baseUrlImg+'/yuyin.png'" alt="" class="img" /> </div> </template> <script> export default { data() { return { // 这是搜索框中的内容 search_word: '' } }, methods: { // 语音点击事件 yuyin: function() { var that = this // 向用户发起授权请求 uni.authorize({ scope: 'scope.record', // 获取录音功能,也就是麦克风权限 success: (res) => { // 用户授权使用麦克风权限调用语音搜索事件函数 that.plugin() }, // 用户没有授权使用麦克风权限执行以下代码 fail(res) { // 显示模态弹窗提示用户没有开启麦克风权限 uni.showModal({ content: '检测到您未开启麦克风权限,请保持麦克风权限为开启状态', confirmText: '去开启', showCancel: false, success: (res) => { console.log(res) if(res.confirm) { // 调起客户端小程序设置界面,返回用户设置的操作结果 uni.openSetting({ success: (res) => { console.log(res) if(res.authSetting['scope.record'] == false) { that.plugin() } } }) } else { uni.navigateBack({ delta: 1 }) } } }) } }) } // 语音搜索 plugin () { var that = this var plugin = requirePlugin('WechatSI') var manager = plugin.getRecordRecognitionManager() // 设置录音的参数 manager.start({ duration: 5000, // 时间 lang: "zh_CN" // 语言 }) // 开始录音 manager.onStart = function(res) { console.log("成功开始录音识别", res) if(res.msg == 'Ok') { // 提示用户正在录音 uni.showToast({ title: '正在识别语音...', duration: 5000, icon: 'loading' }) } } // 录音结束 manager.onStop = function(res) { // 提示用户正在跳转到搜索页面(因为我做的时候,在跳转这块会有1~2秒的时间,所以我设置了一个提示框) uni.showToast({ title: '正在跳转...', duration: 1500, icon: 'success' }) // 将识别的语音翻译成文本 plugin.translate({ lfrom: 'en_US', lto: 'zh_CN', content: res.result, success: function(res) { if(res.retcode == 0) { // (iphone是这样,Android不清楚)语音识别有时会在末尾添加符号 if(res.result.charAt(res.result.length - 1) == '。' || res.result.charAt(res.result.length - 1) == '.') { res.result = res.result.substr(0, res.result.length - 1); } // 将翻译后的内容放到搜索框中 that.search_word = res.result // 执行搜索功能的代码 that.searchName() } else { console.log('翻译失败', res) } }, fail: function(res) { console.log('网络失败', res) // 当用户说话声音小或者用户没有说话就会报这两个错误 if(res.retcode == -10001 || res.retcode == -10002) { uni.showToast({ title: '没有听清您说什么', duration: 1000, icon: 'error' }) } } }) } // 打印错误信息 manager.onError = function(res) { console.error('error msg', res.msg) } } } } </script>
到此这篇关于微信小程序使用同声传译实现语音识别功能的文章就介绍到这了,更多相关小程序语音识别内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
- 本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考,具体如下:1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了Python爬取微信小程序通用方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-29
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 本文主要介绍了手把手教你uniapp和小程序分包,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-02
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16
- 这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下...2017-05-27
- 这篇文章主要为大家详细介绍了微信小程序入门之绘制时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-10-23
- 相信大家现在都知道微信小程序吧,下面这篇文章主要给大家介绍了微信小程序开发之map地图的相关资料,分享出来供大家参考学习,文中通过示例代码介绍的非常详细,需要的朋友们下面跟着小编来一起学习学习吧。...2017-06-15