当前位置：首页 > article >正文

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

article 2025/1/20 21:04:35

在微信小程序中，你可以通过以下步骤实现表单中的录音功能，并且允许用户播放之前录制的音频。

1. 录音功能

首先，你需要在小程序页面中添加录音控件。由于微信小程序没有直接的录音标签，你需要使用小程序的录音管理器（wx.getRecorderManager()）来实现录音功能。

以下是一个简单的录音功能实现步骤：

使用 wx.getRecorderManager() 获取录音管理器实例。
调用录音管理器的 start 方法开始录音。
在需要停止录音的时候，调用 stop 方法。
录音停止后，可以通过 onStop 回调获取录音的临时文件路径。

2. 播放录音

为了播放录音，你可以使用小程序的 innerAudioContext 对象。以下是一个简单的播放录音功能实现步骤：

创建一个 innerAudioContext 实例。
在录音停止后，将录音的临时文件路径设置给 innerAudioContext 的 src 属性。
调用 innerAudioContext 的 play 方法开始播放录音。

3. 结合表单

将录音功能和播放功能结合到表单中，你可以这样做：

在表单中添加一个按钮用于开始录音。
在表单中添加另一个按钮用于停止录音并播放录音（或者只停止录音，并提供一个单独的播放按钮）。
使用数据绑定将录音的临时路径保存到页面的数据中，以便在需要时播放录音。

示例代码

以下是一个简单的示例代码，展示了如何在微信小程序中实现表单中的录音和播放功能：

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();
  },

  // ... 其他方法，比如表单提交等
});

在对应的 WXML 文件中，你可以这样布局：

<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>