WeChat jssdk recording function development record

This article mainly introduces the jssdk recording function development record 0. requirement description

Create a button on the page opened in the browser. press the button to start recording. stop recording and upload the recording for a long time.

1. development process

If you are developing a normal display page, it is no different from developing a normal page. however, to use the recording function of a device (mobile phone), you need to call the recording interface of the app, jssdk is required.

Use jssdk: JS-SDK instructions

• Log on to the public platform and go to "function settings" of "public Account Settings" and enter "JS interface security domain name ". [A public account is required]

• Introduce JS files

• Inject the permission verification configuration through the config interface

• Verified by ready interface

• Handle failure verification through the error interface

// Assume that jssdk has been introduced. [Supports loading using AMD/CMD standard modules] wx. config ({debug: true, // enable the debugging mode. The Returned values of all called APIs are displayed in the client alert. to view the input parameters, you can open them on the pc, the parameter information is output through log and printed only on the pc end. AppId: '', // required. the unique identifier timestamp:, // required. the timestamp of the generated signature is nonceStr:''. // required, sign the random string signature: '', // required. for details, see Appendix 1 jsApiList: [] // required. list of JS interfaces to be used, for a list of all JS interfaces, see Appendix 2}); wx. ready (function () {// after the config information is verified, the ready method is executed. all interfaces must be called after the config interface obtains the result. config is a client-side asynchronous operation, therefore, if you need to call the interface when loading the page, you must place the interface in the ready function to ensure proper execution. For interfaces that are called only when triggered by the user, you can directly call them without putting them in the ready function .}); Wx. error (function (res) {// if the config information fails to be verified, the error function is executed. if the signature expires, the verification fails. you can view the error information in debug mode of config, you can also view it in the returned res parameter. for SPA, you can update the signature here .});

Core functions required: recording and storage

// Assume that the global variable has been defined externally. // Press Start recording $ ('# talk_btn '). on ('touchstart', function (event) {event. preventDefault (); START = new Date (). getTime (); recordTimer = setTimeout (function () {wx. startRecord ({success: function () {localStorage. rainAllowRecord = 'true';}, cancel: function () {alert ('User denied authorization Records') ;}}, 300 );}); // cancel the recording with the song operator $ ('# talk_btn '). on ('touchend', function (event) {event. preventDefault (); END = new Date (). getTi Me (); if (END-START) <300) {END = 0; START = 0; // less than 300 ms, no recording clearTimeout (recordTimer );} else {wx. stopRecord ({success: function (res) {voice. localId = res. localId; uploadVoice () ;}, fail: function (res) {alert (JSON. stringify (res) ;}}) ;}}); // upload the recording function uploadVoice () {// The Upload recording API is called to upload the local recording to the server. // However, it is retained for only three days, and we need to save it for a long time, we need to download resources from the server to our server wx. uploadVoice ({localId: voice. localId, // The local location of the audio to be uploaded ID. isShowProgressTips: 1 is obtained by The stopRecord interface. // The default value is 1. the progress prompt success: function (res) {// The id (res. serverId) is sent to your server for download. $. Ajax ({url: 'backend interface for processing uploaded recordings ', type: 'post', data: JSON. stringify (res), dataType: "json", success: function (data) {alert ('file already saved to Qiniu server'); // This time, I use Qiniu storage}, error: function (xhr, errorType, error) {console. log (error) ;}}) ;}});} // register the end event of the playback recording. in the ready function, wx. onVoicePlayEnd ({success: function (res) {stopWave ();}});

2. little trouble

It is necessary to prevent invalid recordings due to user misoperations (such as repeated clicks and accidental touch.

No recording within Ms

The default "copy dialog box" of the browser is displayed by default when you press it for a long time ".

Use the css setting button user-select: none;

The callback function of the playing recording interface is invalid.

Registration events must be placed in wx. ready.

Block default events

Touch Events remember to add event. preventDefault (); fire proof and explosion proof

How to save static storage resources for a long time

Either store it on your server or use other resources, such as Qiniu, or convert the amr format to mp3 format!
The default server resource format is amr. this format can be played using the audio tag on android machines, but cannot be played using the audio tag on ios machines.

Interaction problems caused by recording function authorization

When you use the jssdk interface for recording, you only need to authorize the recording once in the same domain. that is, when you use the recording for the first time, you will pop up a dialog box asking whether to allow recording. after you click "allow, when you use the recording later, you will not be asked whether the user is allowed.
After you press and hold the recording for the first time, the user is prompted to authorize the user to use the recording function on this page. at this time, the user will open the recording button and then click Allow. after the user permits the recording, before the recording starts, and now the user has released the recording button, so there will be no more touchend events on the recording button, and the recording will continue.
Solution policy: use localStorage to record whether a user has been authorized and determine whether to automatically record a recording on the page to trigger user authorization.

If (! LocalStorage. rainAllowRecord | localStorage. rainAllowRecord! = 'True') {wx. startRecord ({success: function () {localStorage. rainAllowRecord = 'true'; wx. stopRecord () ;}, cancel: function () {alert ('User denied authorization Records ');}});}

3. Difficulties

Volume bug: on ios devices, after using the recording function, the audio of the audio tag is played again, with a very low volume.
However, the playback volume of the recording using the wx. playVoice interface is normal, and the audio tag will increase (but the volume is still very low ).

For more articles on the development record of jssdk recording function, refer to PHP Chinese website!