最近在开发微信小程序,遇到一个需求,实现类似于微信发送语音的效果,但是我这个是发送语音后直接转为文字展示。
-
先说微信小程序的textarea
- 0/200. 是限制用户输入的最长长度
- 0这个位置 首先是根据用户输入的长度变化而变化的
- 200 是用户输入最长度
- 通过bindinput去监听用户的输入的长度,如果用户输入小于最大值,将长度赋值给0的位置
- 在用真机调试的时候发现,textarea的输入值还有placeholder回悬浮在手机上,通过多次查询发现给textarea添加fixed属性会解决
- 在真机调试的时候发现一点开textarea这个页面,输入框就会自动谈到顶部,通过 cursor-spacing=“90” 会解决这个问题
- 0/200. 是限制用户输入的最长长度
<textarea fixed="{
{true}}" class='yuyinCon' maxlength="{
{orderNoteMax}}" placeholder='请输入内容'
value='{
{noteNum}}' cursor-spacing="90" bindinput="bindInputNote" placeholder-class="init_textarea">
<text class="currentWordNumber">{
{currentWordNumber|0}}/{
{orderNoteMax}}</text>
</textarea>
bindInputNote(e){
this.setData({
noteNum:e.detail.value.trim()
})
var len = ((e.detail.value).toString()).length
if(len > this.data.orderNoteMax) return;
this.setData({
currentWordNumber:len
})
}
再来说实现录制语音—通过微信小程序的同声传译的插件
- 需要在微信公众平台去添加插件
- 在app.json添加
"plugins": {
"WechatSI": {
"version": "插件的最新版本号",
"provider": "插件的AppID"
}
},
- 在需要的页面中先
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();
- 对同声传译进行初始化
//识别语音 -- 初始化
initRecord(){
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;
}
}
},
可以看到录音的整个流程–实现过程
- 给按住说话的button绑定catchtouchstart事件,首先根据wx.getSetting判断用户是否打开了录音权限,如果没有打开,则通过wx.authorize,向用户打开授权请求,如果用户拒绝了,就给用户打开授权设置页面。
- 如果用户一开始就授权了录音设置,则调用语音开始录制的事件
- 给button绑定catchtouchend事件,触发语音录制结束事件
- 在语音录制结束后,还可以拿到录音的总时长,具体怎么展示可以自定义。我们可以将录音文件传给后端,后端返回可以播放的录音,在前端就可以播放这段录音。
1. 通过创建 wx.createInnerAudioContext();`
tips:
在代码过程中,我通过catchtouchstart和catchtouchend分出触发点击录制和松开发送两个过程,我本想通过两个事件分别弹出“按住说话”和“松开发送”,经查验发现catchtouchend一直没有触发,查了好久才发现
1. “按住说话”和“松开发送" 我是通过wx: