微信小程序录音功能的实现：有录音、暂停、继续、停止 、播放等功能。
网上找了半天都没找到合适的demo，很多就不完全，看着都有点难受，看了官方的api ，干脆自己写一个
界面如下图
看了网上大部分人写的例子，录音自动结束后都没有进行处理，那样的话会导致录音到达最大录音时间自动停止录音，然后会无法播放。
下面看代码
js
const recorderManager = wx.getRecorderManager()const innerAudioContext = wx.createInnerAudioContext()var initPage({/*** 页面的初始数据*/data: {time: 0, //录音时长duration: 600000, //录音最大值ms 600000/10分钟tempFilePath: "", //音频路径status: 0, //录音状态 0:未开始录音 1:正在录音 2:暂停录音 3:已完成录音playStatus: 0, //录音播放状态 0:未播放 1:正在播放},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {},/**开始录音 */kaishi: function() {clearInterval(init) //清除定时器// 监听音频开始事件recorderManager.onStart((res) => {console.log('recorder start')this.setData({status: 1})})//监听录音自动结束事件(如果不加，录音时间到最大值自动结束后，没获取到录音路径将无法正常进行播放)recorderManager.onStop((res) => {console.log('recorder stop', res)this.setData({tempFilePath: res.tempFilePath,status: 3})this.recordingTimer(this.data.time)})const options = {duration: this.data.duration, //指定录音的时长，单位 mssampleRate: 16000, //采样率numberOfChannels: 1, //录音通道数encodeBitRate: 96000, //编码码率format: 'mp3', //音频格式，有效值 aac/mp3frameSize: 50, //指定帧大小，单位 KB}this.recordingTimer()recorderManager.start(options)},/*** 暂停录音*/zanting: function() {recorderManager.onPause(() => {console.log('recorder pause')this.setData({status: 2})})this.recordingTimer(this.data.time)recorderManager.pause()},/*** 继续录音*/jixu: function() {this.setData({status: 1})this.recordingTimer()recorderManager.resume()},/*** 停止录音*/tingzhi: function() {recorderManager.onStop((res) => {console.log('recorder stop', res)this.setData({tempFilePath: res.tempFilePath,status: 3})})this.recordingTimer(this.data.time)recorderManager.stop()},/*** 播放录音*/bofang: function() {//音频地址innerAudioContext.src = this.data.tempFilePath//在ios下静音时播放没有声音，默认为true，改为false就好了。innerAudioContext.obeyMuteSwitch = false//点击播放if (this.data.playStatus == 0) {this.setData({playStatus: 1})innerAudioContext.play()}// //播放结束innerAudioContext.onEnded(() => {innerAudioContext.stop()this.setData({playStatus: 0})})},//录音计时器recordingTimer: function(time) {var that = thisif (time == undefined) {//将计时器赋值给initinit = setInterval(function() {var time = that.data.time + 1;that.setData({time: time})}, 1000);} else {clearInterval(init)console.log("暂停计时")}},/*** 重新录制*/reset: function() {var that = thiswx.showModal({title: "重新录音",content: "是否重新录制?",success(res) {if (res.confirm) {that.setData({time: 0, //录音时长tempFilePath: "", //音频路径status: 0,playStatus: 0})innerAudioContext.stop()}}})}})
wxml
<view class="sound-recording"><view class="time">{{status==0?'录音时长':(status==3?'录音已完成':'正在录音中')}}：{{time}} 秒</view><view class="btn"><view class="{{status==3?'show':'hide'}}" catchtap="reset" hover-class="jump-hover">重新录制</view><view class="{{status==3 && playStatus==0?'show':'hide'}}" catchtap="bofang" hover-class="jump-hover">{{playStatus==1?'录音播放中':'播放录音'}}</view></view><view class="progress"><text class="txt">最大录音时长（{{duration/1000}}秒 = {{duration/60000}}分钟）</text><progress percent="{{time*(100/(duration/1000))}}" border-radius="10" color="green" stroke-width="10" backgroundColor="#fff" /></view><view class="anniu"><view class="{{status==0?'row':'no-clicking'}}" catchtap="kaishi" hover-class="jump-hover">开始</view><view class="{{status==1?'row':'no-clicking'}}" catchtap="zanting" hover-class="jump-hover">暂停</view><view class="{{status==2?'row':'no-clicking'}}" catchtap="jixu" hover-class="jump-hover">继续</view><view class="{{(status==1 || status==2)?'row':'no-clicking'}}" catchtap="tingzhi" hover-class="jump-hover">停止</view></view></view>
wxss
.sound-recording {background-color: rgb(216, 228, 223);margin: 10rpx 30rpx;border-radius: 20rpx;padding: 5rpx 0rpx;}.btn {margin: 0rpx 100rpx;display: flex;justify-content: space-between;align-items: center;}.btn .show {padding: 10rpx;width: 200rpx;font-size: 25rpx;display: flex;justify-content: center;align-items: center;background-color: rgb(178, 228, 228);border-radius: 20rpx;border: 5rpx solid rgb(127, 204, 214);}.btn .hide {padding: 10rpx;width: 200rpx;font-size: 25rpx;display: flex;justify-content: center;align-items: center;border-radius: 20rpx;border: 5rpx solid #eee;pointer-events: none;background-color: rgba(167, 162, 162, 0.445);}.time {line-height: 70rpx;text-align: center;font-size: 30rpx;}.progress {margin: 20rpx;}.play {margin: 0rpx 20rpx;}.txt {display: flex;justify-content: center;line-height: 60rpx;font-size: 25rpx;}.anniu {margin: 10rpx 50rpx;display: flex;justify-content: space-between;}.row {display: flex;justify-content: center;align-items: center;border-radius: 50%;font-size: 25rpx;width: 80rpx;height: 80rpx;background-color: rgb(178, 228, 228);border: 5rpx solid rgb(127, 204, 214);}.jump-hover {transform: scale(0.9);}/*禁止点击*/.anniu .no-clicking {pointer-events: none;background-color: rgba(167, 162, 162, 0.445);display: flex;justify-content: center;align-items: center;border-radius: 50%;font-size: 25rpx;width: 80rpx;height: 80rpx;border: 5rpx solid rgb(241, 244, 245);}
有什么问题，欢迎指出留言
如果觉得《微信小程序录音功能的实现：有录音 暂停 继续 停止 播放等功能。》对你有帮助，请点赞、收藏，并留下你的观点哦！
