现在有需求，需要将微信小程序上的语音转成文字，其实这也是上文的补充，很简单，就是AI助手需要有多种输入方式，《小程序（三十五）接入讯飞-星火AI助手》中实现了文字输入，官方给的实例中呢，也是有语音输入的，但是，我没看懂。也不能说我没看懂，大概流程是先将语音转文字，再将文字发送给AI小助手。
那如果这个样子的话，我不一定非得使用你讯飞的语音转文字啊，找了一圈，百度的调用最容易，微信小程序前端将语音生成MP3文件，再将MP3文件传到服务器上，再调用百度的SDK实现语音转文字功能。但是，这好像有点麻烦。
那有没有前端就能直接识别的方法呢？我在查资料的时候，发现微信官方给我们提供了一个插件：微信同声传译，最重要的是，这玩意免费。那免费还说啥了，直接就用他。
官方文档：
一：添加插件
设置 -> 第三方设置 -> 添加插件
2 ：配置app.json
在app.json中添加插件配置信息
"plugins": {
"WechatSI": {
"version": "0.3.5",
"provider": "xxxxxxxxxxxxx"
}
},
三：代码实现
这部分就很简单了，我这里也不做过多的代码描述。
Index.wxml
<view>
<textarea placeholder='请输入内容' value='{{content}}'></textarea>
<!-- -->
<view class=''>
<button class="yuyinBtn {{recordState == true ? 'yuyinBtnBg':''}}" data-flag='1' bindtouchstart="touchStart" bindtouchend="touchEnd">
<text wx:if="{{recordState == false}}">按住 说话</text>
<text wx:else>松开 结束</text>
</button>
</view>
<!-- 开始语音 弹出语音图标表示正在录音 -->
<cover-view wx:if="{{recordState == true}}">
<cover-image src="https://moolsvideo.oss-cn-beijing.aliyuncs.com/minigroup_V2/AIchat/recording.gif"></cover-image>
<cover-view>开始语音</cover-view>
</cover-view>
</view>
Index.js
const app = getApp();
//引入插件：微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();
Page({
/**
* 页面的初始数据
*/
data: {
//语音
recordState: false, //录音状态
content:'',//内容
flag:1
},
/**
* 生命周期函数--监听页面加载
*/
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,'6789765678')
}
// 正常开始录音识别时会调用此事件
manager.onStart = function (res) {
console.log("成功开始录音识别", res)
}
// 识别错误事件
manager.onError = function (res) {
console.error("error msg", res)
}
//识别结束事件
manager.onStop = function (res) {
console.log(res,'99999999999')
console.log('..............结束录音')
console.log('录音临时文件地址 -->' + res.tempFilePath);
console.log('录音总时长 -->' + res.duration + 'ms');
console.log('文件大小 --> ' + res.fileSize + 'B');
console.log('语音内容 --> ' + res.tempFilePath);
if (res.tempFilePath == '') {
wx.showModal({
title: '提示',
content: '听不清楚，请重新说一遍！',
showCancel: false,
success: function (res) {}
})
return;
}
var text = that.data.content + res.result;
if(that.data.flag == 1){
that.setData({
content: text
})
}
}
},
//语音 --按住说话
touchStart: function (e) {
var flag = Number(e.currentTarget.dataset.flag)
this.setData({
recordState: true, //录音状态
flag:flag
})
// 语音开始识别
manager.start({
lang: 'zh_CN',// 识别的语言
})
},
//语音 --松开结束
touchEnd: function (e) {
this.setData({
recordState: false
})
// 语音结束识别
manager.stop();
},
})
Index.wxss
/* pages/yuyin/yuyin.wxss */
.yuyinWrap {
position: relative;
margin-top:300rpx;
}
.yuyinCon {
border: 1px solid #ccc;
margin: 0 auto;
padding: 10rpx 10rpx 70rpx;
}
.yuyin {
position: absolute;
bottom: 0;
left: 48rpx;
font-size: 36rpx;
color: #999;
padding-bottom: 10rpx;
}
.yuyin icon.iconfont {
font-size: 34rpx;
padding: 0 17rpx 15rpx;
border-radius: 50%;
background: #73dbef;
margin-right: 14rpx;
color: #fff;
}
.consultYuyin {
height: 100%;
width: 90%;
}
.icon-jianpan1 {
position: absolute;
left: 10rpx;
bottom: 6px;
color: #606267;
font-size: 60rpx;
}
.yuyinBtn {
width: 70%;
height: 70rpx;
position: absolute;
right: 112rpx;
bottom: 12rpx;
border: 1px solid #eee;
background: #fff;
color: #606267;
line-height: 62rpx;
}
.yuyinBtnBg {
background: #eee;
}
text{
/* background-color: rgb(31, 105, 165); */
color: green;
font-weight: 900;
}
.yuyinBtn::after {
/* background: #fff; *//* color: #000; */
border-radius: 0;
border: none;
}
.startYuyinImage {
position: fixed;
top: 210rpx;
left: 50%;
width: 190rpx;
height: 240rpx;
background: rgba(0, 0, 0, 0.6);
border-radius: 20rpx;
color: #fff;
text-align: center;
margin-left: -95rpx;
}
.startYuyinImage cover-image {
margin: 30rpx auto;
width: 100rpx;
height: 100rpx;
}
.startYuyinImage cover-view {
margin-top: 25rpx;
}
上方的代码复制到一个现有的微信小程序中，配置好app.json就可用。
这玩意比较坑的是，我使用微信开发者工具测试的时候是不可用的，最后上的真机调试，才可以。真机调试嘛，就是个坑。上方的代码会帮你节省一些时间。
在本地调试一切顺利，在上线之后遇到了一点点的小坑：上线之后，之后我的手机是好用的，其他人都是不好用的，我百思不得其解，我把小程序删除，重新进入，我得也不好用了，这是为啥呢？
原来，微信小程序调用麦克风需要授权，在电脑端开发的时候，直接就授权了，但是上线之后，用户需要授权，但是用户授权也不是他想授权就能授权的，你需要更新一下你小程序的“小程序隐私保护指引”
“小程序隐私保护指引”在：设置-》基本设置-》服务内容声明中：
这个设置完了需要审核，审核时间可能比较长，要有耐心等待。
有好的建议，请在下方输入你的评论。
