小程序端录音、播放踩坑日记——开发者必备

导语
在小程序开发中，录音和播放功能是常见的功能需求之一。本文将分享我在小程序端实现录音、播放功能时的经验和踩坑记录，希望能为其他开发者提供参考和帮助，助力大家快速掌握小程序开发技巧。

一、录音部分
在小程序中实现录音功能，主要用到wx.getRecorderManager()模块。以下是具体代码：

const recorder = wx.getRecorderManager();

// 开始录音
recorder.start({
  duration: 10000,
  sampleRate: 44100,
  numberOfChannels: 2,
  encodeBitRate: 192000,
  format: 'mp3',
});

// 停止录音
recorder.stop();

在 componentDidMount 生命周期中，注册几个事件监听函数，分别用于监听录音开始、结束和进度更新事件：

componentDidMount() {
  recorder.onStart(() => {
    console.log('录音开始');
  });

  recorder.onStop(() => {
    console.log('录音结束');
  });

  recorder.onProgress((res) => {
    console.log('录音进度更新：', res);
  });
}

二、播放部分
在小程序中实现播放功能，主要用到wx.createInnerAudioContext()方法。以下是具体代码：

const audioContext = wx.createInnerAudioContext();

// 播放音频
audioContext.src = 'path/to/audio.mp3';
audioContext.play();

// 暂停播放
audioContext.pause();

// 停止播放
audioContext.stop();

在 componentDidMount 生命周期中，注册几个事件监听函数，分别用于监听播放开始、结束和进度更新事件：

componentDidMount() {
  audioContext.onPlay(() => {
    console.log('播放开始');
  });

  audioContext.onPause(() => {
    console.log('播放暂停');
  });

  audioContext.onStop(() => {
    console.log('播放结束');
  });

  audioContext.onEnded(() => {
    console.log('播放结束');
  });

  audioContext.onTimeUpdate(() => {
    console.log('播放进度更新：', audioContext.currentTime);
  });
}

三、踩坑记录
在开发过程中，我遇到了以下几个坑：

1. 录音时，如果中途切换到其他页面，录音会自动停止。
2. 录音时，如果手机来电或收到其他通知，录音也会自动停止。
3. 播放音频时，如果中途切换到其他页面，音频会自动停止。
4. 播放音频时，如果手机来电或收到其他通知，音频也会自动停止。

四、解决办法
针对上述踩坑，我找到了以下解决办法：

1. 为了避免录音中途自动停止，可以在 app.js 中添加以下代码：

App({
  onLaunch() {
    wx.setKeepScreenOn({
      keepScreenOn: true,
    });
  },
});

2. 为了避免录音时手机来电或收到其他通知导致录音自动停止，可以在 wx.getRecorderManager() 中添加以下代码：

recorder = wx.getRecorderManager({
  audioInterruption: true,
});

3. 为了避免播放音频时中途切换到其他页面导致音频自动停止，可以在 wx.createInnerAudioContext() 中添加以下代码：

audioContext = wx.createInnerAudioContext({
  obeyMuteSwitch: false,
});

4. 为了避免播放音频时手机来电或收到其他通知导致音频自动停止，可以在 wx.createInnerAudioContext() 中添加以下代码：

audioContext = wx.createInnerAudioContext({
  audioInterruption: true,
});

结语
希望本文对您有所帮助。如果您在小程序开发中遇到任何问题，欢迎随时与我联系。