微信小程序如何实现录音Record功能

这篇文章主要介绍了微信小程序如何实现录音Record功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

具体内容如下

布局

<!--pages/record/record.wxml--><view> <button   class="tui-menu-list"  bindtap="startRecordAac"   type="primary">录音开始(aac)</button> <button   class="tui-menu-list"  bindtap="startRecordMp3"   type="primary">录音开始(mp3)</button> <button   class="tui-menu-list"   bindtap="stopRecord"   type="primary">录音结束</button> <button   class="tui-menu-list"  bindtap="playRecord"   type="primary">播放录音</button></view>

样式：

 .tui-menu-list{  flex-direction: row;  margin: 20rpx;  padding: 20rpx;}

开始录音和停止录音

// pages/record/record.jsPage({     data: {   },   onLoad:function (options) {    var that = this    this.recorderManager = wx.getRecorderManager();    this.recorderManager.onError(function () {      that.tip("录音失败！");    })    this.recorderManager.onStop(function (res) {      that.setData({        src:res.tempFilePath      })      console.log(res.tempFilePath)      that.tip("录音完成！")    })    this.innerAudioContext = wx.createInnerAudioContext()    this.innerAudioContext.onError((res) =>{      that.tip("播放录音失败!")    })  },   //提示  tip:function (msg) {    wx.showModal({      cancelColor: 'cancelColor',      title:'提示',      content:msg,      showCancel:false    })  },   //录制aac  startRecordAac:function () {    this.recorderManager.start({      format:'aac'    })  },   //录制mp3  startRecordMp3:function () {    this.recorderManager.start({      format:'mp3'    })  },   //停止录音  stopRecord:function () {    this.recorderManager.stop()  },   //播放录音  playRecord:function () {    var that = this    var src = this.data.src    if (src='') {      this.tip('请先录音')      return    }    this.innerAudioContext.src = this.data.src    this.innerAudioContext.play()  }   })

效果图：

感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序如何实现录音Record功能”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!