我使用同声传译语音识别功能是为了实现微信小程序首页的语音搜索功能,如果你也是那么恭喜你,你可以ctrl+c、ctrl+v再改一改,如果你不是那么你也不要着急的走可以看完我的文章会对你有所帮助!

  首先是在微信公众平台(也就是小程序的后台),在左侧菜单栏中的设置-->第三方设置下的插件管理-->添加-->搜索同声传译-->点击添加

 

  接下来就是在代码中进行添加一些设置。

  如果你是使用微信开发者工具进行开发小程序的话,需要在app.json文件中添加一下代码。

 1 // app.json
2 {
3 ...
4 "plugins": {
5 ...
6 "WechatSI": {
7 "version": "0.3.4", // 这是同声传译的版本(也可以在微信公众平台添加的同声传译查看最新版本)
8 "provider": "wx069ba97219f66d99" // 这是同声传译的ID
9 }
10 }
11 }

  如果你是使用 Hbuildex 进行开发小程序的话,需要在 manifest.json 文件的源码视图中进行添加修改。

  在源码视图中找到 mp-weixin,然后按照以下代码进行添加修改

 1 // manifest.json
2 /* 小程序特有相关 */
3 "mp-weixin": {
4 "appid": "xxxxxxxxxx", // 这是你小程序的AppId
5 ...
6 "plugins": {
7 "WechatSI": {
8 "version": "0.3.4", // 这是同声传译的版本(也可以在微信公众平台添加的同声传译查看最新版本)
9 "provider": "wx069ba97219f66d99" // 这是同声传译的ID
10 }
11 }
12 }

  做完以上步骤之后,就可以根据官方文档进行开发了

  下面就是我的功能实现代码了

  1 // index.vue 在这里我的页面布局只写了语音按钮(简化了)
2 <template>
3 <div @click="yuyin" class="yuyin-icon">
4 <img :src="baseUrlImg+'/yuyin.png'" alt="" class="img" />
5 </div>
6 </template>
7 <script>
8 export default {
9 data() {
10 return {
11 // 这是搜索框中的内容
12 search_word: ''
13 }
14 },
15 methods: {
16 // 语音点击事件
17 yuyin: function() {
18 var that = this
19 // 向用户发起授权请求
20 uni.authorize({
21 scope: 'scope.record', // 获取录音功能,也就是麦克风权限
22 success: (res) => {
23 // 用户授权使用麦克风权限调用语音搜索事件函数
24 that.plugin()
25 },
26 // 用户没有授权使用麦克风权限执行以下代码
27 fail(res) {
28 // 显示模态弹窗提示用户没有开启麦克风权限
29 uni.showModal({
30 content: '检测到您未开启麦克风权限,请保持麦克风权限为开启状态',
31 confirmText: '去开启',
32 showCancel: false,
33 success: (res) => {
34 console.log(res)
35 if(res.confirm) {
36 // 调起客户端小程序设置界面,返回用户设置的操作结果
37 uni.openSetting({
38 success: (res) => {
39 console.log(res)
40 if(res.authSetting['scope.record'] == false) {
41 that.plugin()
42 }
43 }
44 })
45 } else {
46 uni.navigateBack({
47 delta: 1
48 })
49 }
50 }
51 })
52 }
53 })
54 }
55 // 语音搜索
56 plugin () {
57 var that = this
58 var plugin = requirePlugin('WechatSI')
59 var manager = plugin.getRecordRecognitionManager()
60 // 设置录音的参数
61 manager.start({
62 duration: 5000, // 时间
63 lang: "zh_CN" // 语言
64 })
65 // 开始录音
66 manager.onStart = function(res) {
67 console.log("成功开始录音识别", res)
68 if(res.msg == 'Ok') {
69 // 提示用户正在录音
70 uni.showToast({
71 title: '正在识别语音...',
72 duration: 5000,
73 icon: 'loading'
74 })
75 }
76 }
77 // 录音结束
78 manager.onStop = function(res) {
79 // 提示用户正在跳转到搜索页面(因为我做的时候,在跳转这块会有1~2秒的时间,所以我设置了一个提示框)
80 uni.showToast({
81 title: '正在跳转...',
82 duration: 1500,
83 icon: 'success'
84 })
85 // 将识别的语音翻译成文本
86 plugin.translate({
87 lfrom: 'en_US',
88 lto: 'zh_CN',
89 content: res.result,
90 success: function(res) {
91 if(res.retcode == 0) {
92 // (iphone是这样,Android不清楚)语音识别有时会在末尾添加符号
93 if(res.result.charAt(res.result.length - 1) == '。' || res.result.charAt(res.result.length - 1) == '.') {
94 res.result = res.result.substr(0, res.result.length - 1);
95 }
96 // 将翻译后的内容放到搜索框中
97 that.search_word = res.result
98 // 执行搜索功能的代码
99 that.searchName()
100 } else {
101 console.log('翻译失败', res)
102 }
103 },
104 fail: function(res) {
105 console.log('网络失败', res)
106 // 当用户说话声音小或者用户没有说话就会报这两个错误
107 if(res.retcode == -10001 || res.retcode == -10002) {
108 uni.showToast({
109 title: '没有听清您说什么',
110 duration: 1000,
111 icon: 'error'
112 })
113 }
114 }
115 })
116 }
117 // 打印错误信息
118 manager.onError = function(res) {
119 console.error('error msg', res.msg)
120 }
121 }
122 }
123 }
124 </script>

  (欢迎评论区留言,大家一起讨论学习)

微信小程序使用同声传译实现语音识别功能的更多相关文章

  1. WordPress版微信小程序3.1.5版的新功能

    产品的完善是无止境,每过段时间就会发现产品的新问题,使用的人越多,提的需求也会越多,我听得最多的一句话就是:如果加上某某功能就完美了.其实,完美是不存在的,每个人的视角不一样,完美的定义也是不一样的. ...

  2. 微信小程序wx.showActionSheet调用客服信息功能

    微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (re ...

  3. 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频 ...

  4. 快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率 对于一般的图片上传功能开发,我们 ...

  5. 微信小程序图片上传并展示

    1.首先编写微信小程序的页面和样式: index.js var total = []; Page({ data: { perImgSrc: [] }, onLoad: function (option ...

  6. 微信小程序转发商品的详情页 + 转发功能(传参)

    1.微信小程序转发传参,利用的还是onShareAppMessageapi 2.利用的还有json转换 JSON 是用于存储和传输数据的格式. JSON 通常用于服务端向网页传递数据 函数 描述JSO ...

  7. 微信小程序---图片上传+服务端接受

    原文地址:http://blog.csdn.net/sk719887916/article/details/54312573 微信小程序,图片上传,应用地方-修改用户信息的头像. 详细代码: 小程序的 ...

  8. 微信小程序图片上传和裁剪

    本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...

  9. 微信小程序文件上传结合lin ul

    html <l-form name="goods" l-form-btn-class="l-form-btn-class" bind:linsubmit= ...

随机推荐

  1. Day11_56_在SortedSet中使用泛型

    在SortedSet中使用泛型 import java.util.SortedSet; import java.util.TreeSet; //主类 public class GenericTest0 ...

  2. Day11_54_泛型(Generic)

    泛型 * Java泛型设计原则:只要在编译时期没有出现警告,那么运行时期就不会出现ClassCastException异常. * 泛型:把类型明确的工作推迟到创建对象或调用方法的时候才去明确的特殊的类 ...

  3. PAT归纳总结——一些容易记混的概念

    在刷题的过程中,有时候会遇到一些数据结构中的一些概念,如果对这些概念理解不清楚,甚至理解有误的话,就很可能把题目做错.所以,专门找出在刷题过程中出现的一些概念,以免考试的时候用到想不起来. 拓扑排序 ...

  4. PAT归纳总结——关于二叉树的一些总结

    今天是6月26日到下个月的这个时候已经考过试了,为了让自己考一个更高的分数,所以我打算把PAT的相关题型做一个总结.目前想到的方法就是将相关的题型整理到一起然后,针对这种题型整理出一些方法. 二叉树的 ...

  5. 分布式存储bfs

    来自bilibili的bfs,很喜欢它的分层结构,我认为,把它改造成类似hadoop的平台,也是可以的. 1.实现分布式存储 其实就是同步元信息和调度的问题,同步元信息可以使用zk,调度具体看应用.b ...

  6. 【MySQL】若sql语句中order by指定了多个字段,则怎么排序?

    举个例子吧:order by id desc,time desc先是按 id 降序排列 (优先)如果 id 字段 有些是一样的话 再按time 降序排列 (前提是满足id降序排列)   order b ...

  7. 【小白向】基于Docker使用Gogs,Drone以及drone-runner-docker的自动化部署

    Gogs是基于Go语言编写的可以替代gitlab的代码托管平台,它没有gitlab那么庞大且不需要占用大量资源,对小型服务器相对于比较友好,我们甚至可以使用树莓派搭建. 服务器配置: * 操作系统:C ...

  8. DexHunter的原理分析和使用说明(二)

    本文博客地址:http://blog.csdn.net/qq1084283172/article/details/53715325 前面的博文<Android通用脱壳工具DexHunter的原理 ...

  9. Android木马病毒com.schemedroid的分析报告

    某安全公司移动病毒分析报告的面试题目,该病毒样本的代码量比较大,最大的分析障碍是该病毒样本的类名称和类方法名称以及类成员变量的名称被混淆为无法辨认的特殊字符,每个被分析的类中所有的字符串都被加密处理了 ...

  10. TCP的三次握手和四次挥手和UDP协议

    目录 TCP 三次握手 四次挥手 为什么建立连接是三次而断开连接是四次呢? TCP和UDP的区别 TCP数据包的封装 UDP数据包封装 SCTP SYN Flood泛洪攻击 TCP TCP(Trans ...