How to implement recording and playback functions in WeChat mini program

This article mainly introduces the WeChat mini program recording and playback recording functions. The mini program provides two recording APIs, the old version recording function and the new version recording function. Friends who need it can refer to it

Two recording APIs are provided in the mini program

Old version recording function

First start recording, then stop recording to pull the audio Temporary address

Start recording:

var that = this;
  wx.startRecord({
   success: function (res) {
    // 调用了停止录音接口就会触发这个函数，res.tempFilePath为录音文件临时路径
    var tempFilePath = res.tempFilePath
    that.setData({
     src: tempFilePath
    })
   },
   fail: function (res) {
    //录音失败的处理函数
   }
  })

Stop recording:

wx.stopRecord()

Play recording:

wx.playVoice({
 filePath: src // src可以是录音文件临时路径
})

New version of recording

Get the globally unique recording manager, and then the recording depends on it, and playing the recording requires the internal audio context innerAudioContext object.

Get the globally unique recording manager:

var that = this;
  this.recorderManager = wx.getRecorderManager();
  this.recorderManager.onError(function(){
   // 录音失败的回调处理
  });
  this.recorderManager.onStop(function(res){
   // 停止录音之后，把录取到的音频放在res.tempFilePath
   that.setData({
    src: res.tempFilePath 
   })
   console.log(res.tempFilePath )
  });

Start recording:

this.recorderManager.start({
   format: 'mp3' // 如果录制acc类型音频则改成aac
});

End recording:

this.recorderManager.stop()

Play audio:

this.innerAudioContext = wx.createInnerAudioContext();
  this.innerAudioContext.onError((res) => {
   // 播放音频失败的回调
  })
  this.innerAudioContext.src = this.data.src; // 这里可以是录音的临时路径
  this.innerAudioContext.play()

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement offset and uniform animation in JS

How to implement table merge cells in Bootstrap

How to get the first value in the select drop-down box in JavaScript

How to get and display the password in real time in AngularJS

The above is the detailed content of How to implement recording and playback functions in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!