微信小程序----实现语音的录制,并将语音转为文字

最近在开发微信小程序,遇到一个需求,实现类似于微信发送语音的效果,但是我这个是发送语音后直接转为文字展示。
在这里插入图片描述

  1. 先说微信小程序的textarea

    1. 0/200. 是限制用户输入的最长长度
      1. 0这个位置 首先是根据用户输入的长度变化而变化的
      2. 200 是用户输入最长度
      3. 通过bindinput去监听用户的输入的长度,如果用户输入小于最大值,将长度赋值给0的位置
    2. 在用真机调试的时候发现,textarea的输入值还有placeholder回悬浮在手机上,通过多次查询发现给textarea添加fixed属性会解决
    3. 在真机调试的时候发现一点开textarea这个页面,输入框就会自动谈到顶部,通过 cursor-spacing=“90” 会解决这个问题
<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
	})
}

再来说实现录制语音—通过微信小程序的同声传译的插件

  1. 需要在微信公众平台去添加插件
  2. 在app.json添加
"plugins": {
    "WechatSI": {
      "version": "插件的最新版本号",
      "provider": "插件的AppID"
    }
  },
  1. 在需要的页面中先
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();
  1. 对同声传译进行初始化
//识别语音 -- 初始化
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;
      }
	}
},

可以看到录音的整个流程–实现过程

  1. 给按住说话的button绑定catchtouchstart事件,首先根据wx.getSetting判断用户是否打开了录音权限,如果没有打开,则通过wx.authorize,向用户打开授权请求,如果用户拒绝了,就给用户打开授权设置页面。
  2. 如果用户一开始就授权了录音设置,则调用语音开始录制的事件
  3. 给button绑定catchtouchend事件,触发语音录制结束事件
  4. 在语音录制结束后,还可以拿到录音的总时长,具体怎么展示可以自定义。我们可以将录音文件传给后端,后端返回可以播放的录音,在前端就可以播放这段录音。
    1. 通过创建 wx.createInnerAudioContext();`

tips:
在代码过程中,我通过catchtouchstart和catchtouchend分出触发点击录制和松开发送两个过程,我本想通过两个事件分别弹出“按住说话”和“松开发送”,经查验发现catchtouchend一直没有触发,查了好久才发现

1. “按住说话”和“松开发送" 我是通过wx:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值