WeChat jssdk recording function development record

0. Requirement description

Create a button on the page opened in the WeChat browser. The user starts recording after pressing and holding the button, and stops recording after letting go. And upload the recording and save it for a long time.

1. Development process

If you are developing an ordinary display page, it is no different from developing an ordinary page. However, the recording function of the device (mobile phone) needs to be used here. To call the recording interface of WeChat app, you need to use WeChat jssdk.

Use WeChat jssdk: WeChat JS-SDK documentation

• First log in to the WeChat public platform and enter the "Function Settings" of "Official Account Settings" to fill in " JS interface security domain name". [WeChat public account required]

• Introduce JS files

• Inject permission verification configuration through the config interface

• Process successful verification through the ready interface

• Process failed verification through the error interface

##

//假設(shè)已引入微信jssdk?！局С质褂?AMD/CMD?標(biāo)準(zhǔn)模塊加載方法加載】
wx.config({
????debug:?true,?//?開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印。
????appId:?'',?//?必填，公眾號的唯一標(biāo)識
????timestamp:?,?//?必填，生成簽名的時(shí)間戳
????nonceStr:?'',?//?必填，生成簽名的隨機(jī)串
????signature:?'',//?必填，簽名，見附錄1
????jsApiList:?[]?//?必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});

wx.ready(function(){

????//?config信息驗(yàn)證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
});

wx.error(function(res){

????//?config信息驗(yàn)證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。

});

The core function of this requirement: recording And save

//假設(shè)全局變量已經(jīng)在外部定義
//按下開始錄音
$('#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('用戶拒絕授權(quán)錄音');
????????????}
????????});
????},300);
});
//松手結(jié)束錄音
$('#talk_btn').on('touchend',?function(event){
????event.preventDefault();
????END?=?new?Date().getTime();
????
????if((END?-?START)?<?300){
????????END?=?0;
????????START?=?0;
????????//小于300ms，不錄音
????????clearTimeout(recordTimer);
????}else{
????????wx.stopRecord({
??????????success:?function?(res)?{
????????????voice.localId?=?res.localId;
????????????uploadVoice();
??????????},
??????????fail:?function?(res)?{
????????????alert(JSON.stringify(res));
??????????}
????????});
????}
});

//上傳錄音
function?uploadVoice(){
????//調(diào)用微信的上傳錄音接口把本地錄音先上傳到微信的服務(wù)器
????//不過，微信只保留3天，而我們需要長期保存，我們需要把資源從微信服務(wù)器下載到自己的服務(wù)器
????wx.uploadVoice({
????????localId:?voice.localId,?//?需要上傳的音頻的本地ID，由stopRecord接口獲得
????????isShowProgressTips:?1,?//?默認(rèn)為1，顯示進(jìn)度提示
????????success:?function?(res)?{
????????????//把錄音在微信服務(wù)器上的id（res.serverId）發(fā)送到自己的服務(wù)器供下載。
????????????$.ajax({
????????????????url:?'后端處理上傳錄音的接口',
????????????????type:?'post',
????????????????data:?JSON.stringify(res),
????????????????dataType:?"json",
????????????????success:?function?(data)?{
????????????????????alert('文件已經(jīng)保存到七牛的服務(wù)器');//這回，我使用七牛存儲
????????????????},
????????????????error:?function?(xhr,?errorType,?error)?{
????????????????????console.log(error);
????????????????}
????????????});
????????}
????});
}

//注冊微信播放錄音結(jié)束事件【一定要放在wx.ready函數(shù)內(nèi)】
wx.onVoicePlayEnd({
????success:?function?(res)?{
????????stopWave();
????}
});

---

2. Little trouble

To prevent invalid recording caused by user misoperation (such as repeated clicks, accidental touches).

No recording when less than 300ms

Prevent the WeChat browser’s default “copy dialog box” from popping up by the browser caused by the user’s long press.

Use css to set the button user-select:none;

WeChat play recording interface event callback function is invalid

WeChat registration event must be Put it in wx.ready.

Prevent default events

Touch events remember to add event.preventDefault(); Fire and explosion protection

WeChat stores static resources for 3 days , how to save it for a long time

Either save it to your own server, or use other resources, such as Qiniu, which can also help us freely convert amr format to mp3 and other formats!

The default resource format of WeChat server is amr. This format can be played using the audio tag on android machines, but cannot be played on ios machines using the audio tag.

Interaction issues caused by authorization of WeChat recording function

Using WeChat jssdk interface to record, you only need to authorize it once in the same domain, that is, when you use recording for the first time. WeChat itself will pop up a dialog box asking if recording is allowed. After the user clicks Allow, the user will not be asked for permission when recording is used again.

After pressing and holding the recording button for the first time, since the user has not allowed recording, WeChat will prompt the user to authorize the use of the WeChat recording function on this page. At this time, the user will release the recording button and click Allow. After the user allows it, , the recording will actually start. At this time, the user has already released the recording button, so there will be no touchend event on the recording button, and the recording will continue.
Solution strategy: Use localStorage to record whether the user has authorized it, and use this to determine whether it is necessary to automatically record a recording when just entering the page to trigger user authorization

if(!localStorage.rainAllowRecord?||?localStorage.rainAllowRecord?!==?'true'){
????wx.startRecord({
????????success:?function(){
????????????localStorage.rainAllowRecord?=?'true';
????????????wx.stopRecord();
????????},
????????cancel:?function?()?{
????????????alert('用戶拒絕授權(quán)錄音');
????????}
????});
}

---

3. Problem

Volume bug: On an ios device, after using the WeChat recording function and then playing the audio tag, the volume is extremely low.

However, the volume of recording played using the WeChat interface (wx.playVoice) is normal, and after that, the volume of the audio tag will increase (but the volume will still be very low).

For more articles related to WeChat jssdk recording function development records, please pay attention to the PHP Chinese website!