微信小程序使用同声传译实现语音识别功能
我使用同声传译语音识别功能是为了实现微信小程序首页的语音搜索功能，如果你也是那么恭喜你，你可以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>
(欢迎评论区留言，大家一起讨论学习)
版权声明：本文为destreny原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。