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

最新推荐文章于 2025-04-29 10:07:11 发布

邝邝邝邝丹

最新推荐文章于 2025-04-29 10:07:11 发布

阅读量7k

点赞数 12

本文链接：https://blog.csdn.net/qq_42568116/article/details/117948494

版权

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

先说微信小程序的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
	})
}

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

需要在微信公众平台去添加插件
在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: