微信小程序实现录音播放录音功能

Page({
  data: {
    audioSrc: '', // 录音文件的临时路径
    isRecording: false, // 是否正在录音
  },
  // 开始录音
  startRecording: function () {
    const recorderManager = wx.getRecorderManager();
    const innerAudioContext = wx.createInnerAudioContext();
    // 录音停止时的回调
    recorderManager.onStop((res) => {
      this.setData({
        audioSrc: res.tempFilePath, // 保存录音文件的临时路径
        isRecording: false,
      });
      // 播放录音（可选，你也可以提供一个单独的播放按钮）
      innerAudioContext.src = res.tempFilePath;
      innerAudioContext.play();
    });
    // 开始录音
    recorderManager.start({
      format: 'mp3', // 录音格式
    });
    this.setData({
      isRecording: true,
    });
  },
  // 停止录音（并播放，或者只停止）
  stopRecording: function () {
    const recorderManager = wx.getRecorderManager();
    recorderManager.stop();
    // 如果不想在停止时立即播放，可以注释掉下面的代码
    // const innerAudioContext = wx.createInnerAudioContext();
    // innerAudioContext.src = this.data.audioSrc;
    // innerAudioContext.play();
  },
  // 播放录音（如果需要单独的播放按钮）
  playRecording: function () {
    const innerAudioContext = wx.createInnerAudioContext();
    innerAudioContext.src = this.data.audioSrc;
    innerAudioContext.play();
  },
  // ... 其他方法，比如表单提交等
});

<view class="container">
  <form bindsubmit="submitForm">
    <!-- 其他表单项 -->
    <button type="primary" bindtap="startRecording" wx:if="{{!isRecording}}">开始录音</button>
    <button type="warn" bindtap="stopRecording" wx:if="{{isRecording}}">停止录音并播放</button>
    <!-- 或者提供一个单独的播放按钮 -->
    <!-- <button type="primary" bindtap="playRecording" wx:if="{{audioSrc}}">播放录音</button> -->
  </form>
</view>