Brief description of project requirements

After the recording is finished, the user can choose to re-record and play the recording and upload the recording. (Here, the upload recording refers to uploading the recording to his server. The upload step is to call wx. upload Voice at the front end and download the audio file at the back end to the Weixin server and upload it to his server.) Note that the validity of the audio file on the Wechat server is 3 days from the upload time. Because the audio files downloaded from the Wechat server in the background are in amr format, the amr files need to be converted into MP3 in the background first, and played by audio in the front end. Our company purchases Aliyun's media processing services for file transcoding.

Called Wechat Interface

// Start recording interface
wx.startRecord();

// Stop recording interface
wx.stopRecord({
success: function (res) {
    var localId = res.localId;
  }
});

// Automatic Stop Interface for Listening and Recording
wx.onVoiceRecordEnd({
  // complete callbacks are performed when the recording time exceeds one minute without stopping.
  complete: function (res) {
    var localId = res.localId;
  }
});

// Play Voice Interface
wx.playVoice({
  localId: '' // The local ID of the audio to be played is obtained by the stopRecord interface
});

// Pause playback interface
wx.pauseVoice({
  localId: '' // The local ID of the audio that needs to be paused is obtained by the stopRecord interface
});

// End-of-Play Interface for Monitoring Voice
wx.onVoicePlayEnd({wx.onVoice
  success: function (res) {
    var localId = res.localId; // Returns the local ID of the audio
  }
});

// Upload Voice Interface
wx.uploadVoice({
  localId: '', // The local ID of the audio that needs to be uploaded is obtained by the stopRecord interface
  isShowProgressTips: 1, // The default is 1, showing progress hints
  success: function (res) {
    var serverId = res.serverId; // Server-side ID for returning audio
  }
});

Knowledge Points Involved

//Framework for the project: vue.js
@touchstart // Touch the screen with your finger and press it long.
@touchend //Finger off the screen, end long press
@touchmove //Fingers sliding on the screen

Development process

Description: The framework used in the project: Vue
1. Introduce Wechat jssdk and configure Wechat well

2.HTML structure:

<div @touchstart="gtouchstart()" @touchend="gtouchend()" @touchmove="gtouchmove()"></div>

touchstart event: MDN is defined as: Touch start event triggered when contacts are in contact with the surface of touch devices In other words, it's triggered when the finger touches the screen, so here the monitor begins to press long.

@ Touch end event: Triggered when the finger leaves the screen, long press here to end today.

@ Touch Move Event: Triggers continuously when the finger is sliding on the screen. In this long press recording scene, when the finger moves on the screen, it is also considered as the end of the recording, so it is necessary to monitor the finger sliding on the screen.

3.js code

methods:{
  gtouchstart(){
    // When the user presses 500 ms or more, he can start recording.
    setTimeout(() => {
      this.longPress()
    }, 500)}
  },
  longPress(){
    wx.startRecord() // Wechat Start Recording Interface
  },
  gtouchmove(){
    wx.stopRecord({ // Wechat End Recording Interface
      success: res => {
        this.localId = res.localId;
        console.log('Interrupt end recording')
      }
    })
  },
  gtouchend(){
     wx.stopRecord({ // Wechat End Recording Interface
       success: res => {
         this.localId = res.localId;
         console.log('The normal end of recording succeeded')
       }
    })
  },
  wxUpload() { // Upload to Wechat Server
    wx.uploadVoice({
      localId: this.localId, // The local ID of the audio that needs to be uploaded is obtained by the stopRecord interface
      isShowProgressTips: 1, // The default is 1, showing progress hints
      success: res => {
        this.serverId = res.serverId; // Server-side ID for returning audio
      }
    });
  },
}

The general process is shown in the code above:

1. In an html element, listen for long press events at the beginning, long press events at the end, and move events on the screen.
2. Long press the event to start, then call the Wechat interface wx.startRecord to start recording;
3. At the end of the event, call the Wechat interface wx.stopRecord to end the recording and get the localId of the audio.
4. When the user moves his finger during the long press, he calls wx.stopRecord to finish recording.
5. After recording, the voice is uploaded to the Wechat server by calling the Wechat interface wx.uploadVoice.

Problems encountered in the development process

1. When a call to a Wechat recording exceeds 60 seconds, the Wechat will automatically end the recording and return a localId, which is invalid.
Solution:
Add a timer before wx.startRecord() starts. If the recording time reaches 59 seconds, execute wx.stopRecord to stop recording actively, so as to avoid the invalid recording caused by too long recording time.
2. Interaction problems arising from authorization of Weixin recording function
Using Wechat jssdk interface to record, only one authorization is needed in the same domain. That is, when using recording for the first time, Wechat will pop up a dialog box to ask if recording is allowed. After the user clicks on the allowance, he will not consult the user if recording is allowed.
After the first time holding down the recording, because the user has not allowed the recording, Wechat will prompt the user to authorize the use of Wechat recording function on this page. At this time, the user will release the recording button and click on the permission. After the user allows, the recording will really start. At this time, the user has already opened the recording button, then there will be no touch event on the recording button, and the recording will be held. It's going on all the time.
Solution: Use local Storage to record whether a user has been authorized, and use it to determine whether it is necessary to automatically record a recording to trigger user authorization when entering a page.

if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){
    wx.startRecord({
        success: function(){
            localStorage.rainAllowRecord = 'true';
            wx.stopRecord();
        },
        cancel: function () {
            alert('Users refuse to authorize recording');
        }
    });
}

3. The problem that audio cannot be played automatically under ios
For audio playback, in order to make the page beautiful, the method is to hide the audio playback control, and then add time to a button to control audio playback through audio.play(). But there is a problem under ios, audio.play() can not play audio directly, but can only operate audio playback control explicitly. This is because iOS Safari does not allow automatic audio playback and can only be triggered through user interaction. This is probably due to the limitations of Apple's user experience.
Solution:

// After the page is initialized successfully, in the callback function of wx. read, the following method is received and executed, so that the ios user can play the audio normally when he clicks the play button
wx.ready(() => {
  this.$nextTick(() => {
    this.$refs.audio.load()
    this.$refs.audio.play()
    this.$refs.audio.pause();
  })
})

4. Ultimate problem: Insensitivity of some mobile phone screens leads to various problems with long-press recording.
Description: After completing the function of long press recording for the first time, I found that the events of long press and canceling long press are quite insensitive and error-prone. Sometimes I end the recording indescribably in seconds, and the experience is very poor.
Solution: After discussing with our products, we put forward this unavoidable problem, and finally changed the interactive mode of long press recording to click recording.

Finally, refer to the link: http://www.cnblogs.com/liujun...