微信小程序實現錄音播放錄音功能

更新時間：2024年10月23日 09:20:54 作者：蔡高興！

在微信小程序中,實現錄音及播放功能需用到錄音管理器wx.getRecorderManager()和innerAudioContext對象,調用play方法播放,結合表單,可以添加錄音和播放按鈕,用數據綁定保存路徑,注意上傳服務器保存錄音文件以便持久化存儲

1. 錄音功能

首先，你需要在小程序頁面中添加錄音控件。由于微信小程序沒有直接的錄音標簽，你需要使用小程序的錄音管理器（wx.getRecorderManager()）來實現錄音功能。

以下是一個簡單的錄音功能實現步驟：

使用 wx.getRecorderManager() 獲取錄音管理器實例。
調用錄音管理器的 start 方法開始錄音。
在需要停止錄音的時候，調用 stop 方法。
錄音停止后，可以通過 onStop 回調獲取錄音的臨時文件路徑。

2. 播放錄音

為了播放錄音，你可以使用小程序的 innerAudioContext 對象。以下是一個簡單的播放錄音功能實現步驟：

創(chuàng)建一個 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>

請注意，上述代碼中的播放功能是在錄音停止后立即播放的。如果你希望提供一個單獨的播放按鈕，可以注釋掉 stopRecording 方法中的播放代碼，并在 WXML 中添加一個單獨的播放按鈕，綁定到 playRecording 方法上。

另外，由于錄音文件的臨時路徑在下次進入小程序時可能無法訪問，因此如果你需要保存錄音文件以便后續(xù)使用，你需要將錄音文件上傳到服務器，并在服務器上保存錄音文件的路徑或將其持久化存儲。

到此這篇關于微信小程序實現錄音，播放錄音功能的文章就介紹到這了,更多相關微信小程序錄音內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: