微信小程序 -- 获取语音，并将语音转为文字（插件：微信同声传译）

实现的功能是获取语音，并将语音转为文字，实现效果如下：

1. 小程序后台添加插件：微信同声传译
登录小程序后台：https://mp.weixin.qq.com

11. 设置 -> 第三方设置 -> 添加插件

12. 输入“微信同声传译”，点击搜索，之后选择并点击添加

13. 成功添加后，点击详情

14. 复制它的AppID和最新版本号（后序有用）。

2. 配置
去app.json进行配置

其中，version的值对应上面的版本号，provider的值对应上面的AppID

"plugins": {
"WechatSI": {
"version": "0.3.0",
"provider": "wx069ba97219f66d99"
}
},
3. 代码实现
31. wxml代码

<view class="yuyinWrap">
<textarea class='yuyinCon' placeholder='请输入内容' value='{{content}}'></textarea>

<view class=''>
<button class="yuyinBtn {{recordState == true ? 'yuyinBtnBg':''}}" bindtouchstart="touchStart" bindtouchend="touchEnd">
<text wx:if="{{recordState == false}}">按住说话</text>
<text wx:else>松开结束</text>
</button>
</view>

<cover-view class="startYuyinImage" wx:if="{{recordState == true}}">
<cover-image src="../resource/image/yuyin-min.png"></cover-image>
<cover-view>开始语音</cover-view>
</cover-view>
</view>
效果如下：

32. js 实现代码

实现了textarea可以手动输入，也可以语音转为文字填入。代码解析看注释。

具体可以看官网：https://developers.weixin.qq.com/miniprogram/dev/extended/service/translator.html

const app = getApp();
//引入插件：微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();

Page({

/**
* 页面的初始数据
*/
data: {
//语音
recordState: false, //录音状态
content:'',//内容
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//识别语音
this.initRecord();
},
// 手动输入内容
conInput: function (e) {
this.setData({
content:e.detail.value,
})
},
//识别语音 -- 初始化
initRecord: function () {
const that = this;
// 有新的识别内容返回，则会调用此事件
manager.onRecognize = function (res) {
console.log(res)
}
// 正常开始录音识别时会调用此事件
manager.onStart = function (res) {
console.log("成功开始录音识别", res)
}
// 识别错误事件
manager.onError = function (res) {
console.error("error msg", res)
}
//识别结束事件
manager.onStop = function (res) {
console.log('..............结束录音')
console.log('录音临时文件地址 -->' + res.tempFilePath);
console.log('录音总时长 -->' + res.duration + 'ms');
console.log('文件大小 --> ' + res.fileSize + 'B');
console.log('语音内容 --> ' + res.result);
if (res.result == '') {
wx.showModal({
title: '提示',
content: '听不清楚，请重新说一遍！',
showCancel: false,
success: function (res) {}
})
return;
}
var text = that.data.content + res.result;
that.setData({
content: text
})
}
},
//语音 --按住说话
touchStart: function (e) {
this.setData({
recordState: true //录音状态
})
// 语音开始识别
manager.start({
lang: 'zh_CN',// 识别的语言，目前支持zh_CN en_US zh_HK sichuanhua
})
},
//语音 --松开结束
touchEnd: function (e) {
this.setData({
recordState: false
})
// 语音结束识别
manager.stop();
},
})
注意：测试时，在微信开发者工具无效果，要预览或者真机调试下，手机进行测试。