微信小程序录音、播放源码【推荐】

【-----------------------文章尾部附加源码下载地址-----------------------】

1.前端wxml代码，很简单的一个按钮、一些说明文字、一个语音循环列表：

<!--index.wxml-->
<view style="margin-top: 50rpx;width: 100%;display: flex;justify-content: center;color: red;">
  点击录音/松开停止
</view>

<button type="primary" style="margin-top: 50rpx;" catchtouchstart="start" catchtouchend="end">
  录音
</button>

<view wx:if="{{records.length>0}}" style="margin-top: 50rpx;width: 100%;display: flex;justify-content: center;color: red;">
  点击下方录音文件播放
</view>

<view wx:for="{{records}}" wx:key="item" data-item="{{item}}" bindtap="clickPlay" style="width: 100%;margin-top: 10rpx;background: #E3e3e3; height: 100rpx; display: flex;justify-content: center;align-items: center;">
  <view style="width: 90%;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;">
    {{item}}
  </view>
</view>

界面：

2.js功能代码块。主要包含三个功能：开始录音、停止录音、播放声音：

  start() {
    var that=this
    const options = {
      duration: that.data.duration,
      sampleRate: 16000,
      numberOfChannels: 1,
      encodeBitRate: 24000,
      format: 'mp3',
      frameSize: 50
    }
    recorderManager.start(options)
    wx.showToast({
      title: '录音中...',
      mask: false,
      duration: that.data.duration,
      icon: "none",
    })
  },

  end() {
    recorderManager.stop()
  },

  clickPlay(e){
    var that=this
    console.log(e.currentTarget.dataset.item)
    const innerAudioContext = wx.createInnerAudioContext()
    innerAudioContext.autoplay = true
    innerAudioContext.src = e.currentTarget.dataset.item
    innerAudioContext.onPlay(() => {
      wx.showToast({
        title: '播放中...',
        mask: true,
        duration: that.data.duration,
        icon: "none",
      })
    })

    innerAudioContext.onEnded(()=>
    {
      console.log('播放结束')
      wx.hideToast({
        success: (res) => {},
      })
    })

    innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  },

上面只是简单的核心代码，下载录音源码Demo地址：

链接：https://pan.baidu.com/s/1wJ_MqNyhA_s9QTj0hV0nBw
提取码：nucj