小程序wx.getRecorderManager()录音管理

闭包沙漏
• 阅读 7042
小程序中提供了两种录音的API,wx.startRecord和wx.getRecorderManager(),前一个现在微信团队已经不再维护,所以在这里写一下新的录音管理,比之前要强大

1.小程序录音管理介绍 wx.getRecorderManager()

    基础库 1.6.0 开始支持,低版本需做兼容处理,获取全局唯一的录音管理器 recorderManager。

2.小程序录音管理代码

// 录音管理
let record = function (recorderManager) {
  this.recorderManager = recorderManager
  this.recordStart()
}
record.prototype = {
  // 开始录音
  start: function (startObj) {
    this.recorderManager.start(startObj)
  },
  //录音开始事件
  recordStart: function () {
    this.recorderManager.onStart(() => {
      console.log(this.recorderManager, 'this.recorderManager')
    })
  }
}

3.Page onLoad配置

  //录音管理,new 出 第二阶段的实例
    recorderManager = wx.getRecorderManager()
    that.newRecord = new record(recorderManager)
     that.newRecord.recorderManager.onStop((res) => {
         console.log(res, '获取录制完的链接')
    })
    //播放录音
    innerAudioContext = wx.createInnerAudioContext()
    innerAudioContext.onEnded(() => {
      console.log("音频自然播放结束")
    })

4.现在开始录音

    startRecord() {
        let that = this,
          startObj = {
            duration: 60000,
            sampleRate: 44100,
            numberOfChannels: 1,
            encodeBitRate: 192000,
            format: 'mp3',
            frameSize: 50
          }
        //录音开始
        that.newRecord.start(startObj)
        // 录音计时器
        recordTimeInterval = setInterval(function () {
        }, 1000)
  },

5.停止录音

  stopRecord() {
    clearInterval(recordTimeInterval);
    //停止录音事件
    this.newRecord.recorderManager.stop()
  }

6.播放录音

          // 播放录音
          playVoice(e) {
            let that = this
            let srcPath = e.currentTarget.dataset.temppath, // 点击当前传递的播放链接
                  duration = e.currentTarget.dataset.duration, // 录音时间
                  index = e.currentTarget.dataset.index // 索引
            checkArr[index] = srcPath   //用于页面判断播放一个,另一个暂停
            // 播放
            innerAudioContext.obeyMuteSwitch = false
            innerAudioContext.src = srcPath
            innerAudioContext.play()
            // 时间减少器
            playTimeInterval = setInterval(() => {
              let playTime = that.data.playTime += 1
            }, 1000)
          }

7.停止播放

        // 停止播放
          stopVoice(forIndex, e) {
            let index;
            e !== undefined ? index = e.currentTarget.dataset.index : index = forIndex
            clearInterval(playTimeInterval)
            checkArr[index] = undefined
            innerAudioContext.stop()
          }

8.只能播放一个的代码

          // 只能播放一个
          onePlayFor(tempFilePath, src) {
            tempFilePath.forEach((el, i) => {
              if (el.tempFilePath !== src) {
                this.stopVoice(i)
              }
            })
          }

效果图

小程序wx.getRecorderManager()录音管理

录音与停止录音使用小程序bind:touchstart='startRecord' bind:touchend='stopRecord' 事件
点赞
收藏
评论区
推荐文章
小森森 小森森
2年前
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦【区别】:微信小程序的代码与QQ小程序的源码是不一样的。微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
胡哥有话说 胡哥有话说
4年前
微信小程序支付功能全流程实践
前言微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然要接触到,今天胡哥就小程序支付的全流程为大家一一细说,让小伙伴能快速得掌握小程序支付能力,避免踩坑!知己知彼,方能百战不殆小程序支付流程图小程序支付交互流程图(https:/
秃头王路飞 秃头王路飞
2年前
微信原生小程序如何修改第三方样式
一级标题微信原生小程序如何修改第三方样式env:1.微信原生小程序(基础库2.272)2.tdesignminiprogram(最低基础库版本^2.6.5)近期在写微信原生小程序,有一个需求就是去修改一个第三方的库的样式,在写的
关于皕杰小程序打开公众号推文
关联公众号1.首先,登录微信公众号的后台,然后找到小程序,并点击小程序管理;其次,在小程序管理中,找到快速注册并认证小程序,点击以后用管理员身份验证一下。然后搜索想要关联的小程序,点击下一步,就关联成功了。2.小程序与公众号关联的时候,有
马丁路德 马丁路德
4年前
微信小程序 - 路由实践
欢迎来到我博客阅读:1\.前言在微信小程序由一个App()实例,和众多Page()组成。而在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了所有页面,然后提供了以下API来进行路由之间的跳转:1.wx.navigateTo2.wx.redirectTo3.wx.navigateBack4.
Stella981 Stella981
3年前
App唤起微信小程序和回调
在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转。可在“管理中心移动应用应用详情关联小程序信息”,为通过审核的移动应用发起关联小程序操作。唤起App打开下程序他有两种方式:1,通过App分享小程序卡片到微信,然后在微信上点击小程序卡片打开小程序,
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Wesley13 Wesley13
3年前
5G消息与微信小程序互联互通?北京国都互联这么做……
最近微信小程序上线了一个超级流量的新入口URLScheme,据微信官网介绍,scheme码适用于短信、邮件、外部网页等拉起小程序的业务场景。通过小程序页面的URLScheme,可以在短信、邮件或微信外部的网页中打开微信小程序。意义在于将微信流量生态延伸到微信以外渠道,进一步完善了小程序和外部渠道互通的营销场景。北京国都互联第一时
曼成 曼成
1年前
一文教你如何在小程序中快速接入验证码短信API
在微信小程序中接入验证码短信API,可以为用户提供便捷的验证服务。本文将详细介绍如何在小程序中实现这一功能,包括UI设计、API请求以及代码实现。