微信小程序实现录音，暂停，继续，停止，播放

Circle_Key

于 2024-05-07 11:27:48 发布

阅读量156

点赞数 2

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/Circle_Key/article/details/138495351

版权

// pages/index/TextRecitation/TextRecitation.js
const $api = require('../../../utils/request.js').API;
Page({

  /**
   * 页面的初始数据
   */
  data: {
  // 组件所需的参数
  navbarData: {
    showCapsule: 1, //是否显示左上角图标1表示显示0表示不显示
    title: '课文背诵', //导航栏 中间的标题
  },
  recorderManager: '',
    tempFilePath: '',
    innerAudioContext: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const recorderManager = wx.getRecorderManager()
    recorderManager.onStart(() => {
      console.log('recorder start');
    });
    recorderManager.onStop((res) => {
      console.log('recorder stop', res);
      const { tempFilePath } = res;
      // 可以在这里处理录音文件
      this.setData({
        tempFilePath: tempFilePath
      });
    });
    recorderManager.onError((res) => {
      console.error('recorder error', res);
    });
    this.setData({
        recorderManager:recorderManager,
        innerAudioContext: wx.createInnerAudioContext()
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },
//   开始
  startRecord: function () {
    const options = {
      duration: 60000, // 录音的最长时长，单位 ms，最大值 600000（10 分钟）
      sampleRate: 44100, // 采样率，有效值 8000/16000/44100
      numberOfChannels: 1, // 录音通道数，有效值 1/2
      encodeBitRate: 192000, // 编码码率，有效值见下表格
      format: 'mp3', // 音频格式，有效值 aac/mp3
    };
   this.data.recorderManager.start(options);
  },
// 暂停
  pauseRecord: function () {
    this.data.recorderManager.pause();
  },
// 继续
  resumeRecord: function () {
    this.data.recorderManager.resume();
  },
// 停止
  stopRecord: function () {
    this.data.recorderManager.stop();
  },

  // 点击按钮开始录音
  onTapStartRecord: function () {
    this.startRecord();
  },
  // 点击按钮暂停录音
  onTapPauseRecord: function () {
    this.pauseRecord();
  },

  // 点击按钮继续录音
  onTapResumeRecord: function () {
    this.resumeRecord();
  },
  // 点击按钮停止录音
  onTapStopRecord: function () {
    this.stopRecord();
  },
  
  // 播放录音
   playRecord: function () {
    const { tempFilePath, innerAudioContext } = this.data;
    if (tempFilePath) {
      innerAudioContext.src = tempFilePath;
      innerAudioContext.play();
    } else {
      console.error('tempFilePath is empty');
    }
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

  <button bindtap="onTapStartRecord">开始录音</button>
        <button bindtap="onTapPauseRecord">暂停录音</button>
        <button bindtap="onTapResumeRecord">继续录音</button>
        <button bindtap="onTapStopRecord">停止录音</button>
        <button bindtap="playRecord">播放录音</button>

获取录制时间

// pages/index/TextRecitation/TextRecitation.js
const $api = require('../../../utils/request.js').API;
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 组件所需的参数
        navbarData: {
            showCapsule: 1, //是否显示左上角图标1表示显示0表示不显示
            title: '课文背诵', //导航栏 中间的标题
        },
        recorderManager: '',
        tempFilePath: '',
        innerAudioContext: null,
        // 添加录制时间相关数据
        isRecording: false,
        isPaused: false,
        recordTime: 0,
        recordTimer: null,
        formattedRecordTime: '00:00' // 格式化后的录制时间字符串
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        const recorderManager = wx.getRecorderManager()
        recorderManager.onStart(() => {
            console.log('recorder start');
            this.setData({
                isRecording: true,
                recordTime: 0,
                isPaused: false
            });
            // 开始录制时启动定时器
            this.startTimer();
        });
        recorderManager.onStop((res) => {
            console.log('recorder stop', res);
            const {
                tempFilePath
            } = res;
            // 可以在这里处理录音文件
            this.setData({
                tempFilePath: tempFilePath,
                isRecording: false
            });
            // 停止录制时清除定时器
            this.clearTimer();
        });
        recorderManager.onError((res) => {
            console.error('recorder error', res);
        });
        this.setData({
            recorderManager: recorderManager,
            innerAudioContext: wx.createInnerAudioContext()
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },
    //   开始
    startRecord: function () {
        const options = {
            duration: 60000, // 录音的最长时长，单位 ms，最大值 600000（10 分钟）
            sampleRate: 44100, // 采样率，有效值 8000/16000/44100
            numberOfChannels: 1, // 录音通道数，有效值 1/2
            encodeBitRate: 192000, // 编码码率，有效值见下表格
            format: 'mp3', // 音频格式，有效值 aac/mp3
        };
        this.data.recorderManager.start(options);
    },
    // 暂停
    pauseRecord: function () {
        this.data.recorderManager.pause();
        this.clearTimer();
    },
    // 继续
    resumeRecord: function () {
        this.data.recorderManager.resume();
        this.startTimer();
    },
    // 停止
    stopRecord: function () {
        this.data.recorderManager.stop();
    },

    // 点击按钮开始录音
    onTapStartRecord: function () {
        this.startRecord();
    },
    // 点击按钮暂停录音
    onTapPauseRecord: function () {
        this.pauseRecord();
    },

    // 点击按钮继续录音
    onTapResumeRecord: function () {
        this.resumeRecord();
    },
    // 点击按钮停止录音
    onTapStopRecord: function () {
        this.stopRecord();
    },

    // 播放录音
    playRecord: function () {
        const {
            tempFilePath,
            innerAudioContext
        } = this.data;
        if (tempFilePath) {
            innerAudioContext.src = tempFilePath;
            innerAudioContext.play();
        } else {
            console.error('tempFilePath is empty');
        }
    },
    // 开始定时器
    startTimer() {
        this.data.recordTimer = setInterval(() => {
            if (!this.data.isPaused) {
                const minutes = Math.floor(this.data.recordTime / 60);
                const seconds = this.data.recordTime % 60;
                const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
                const formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
                this.setData({
                    recordTime: this.data.recordTime + 1,
                    formattedRecordTime: `${formattedMinutes}:${formattedSeconds}`
                });
            }
        }, 1000); // 每秒更新一次
    },

    // 清除定时器
    clearTimer() {
        clearInterval(this.data.recordTimer);
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        // 页面卸载时清除定时器，避免内存泄漏
        clearInterval(this.data.recordTimer);
    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})