微信jssdk錄音功能開發(fā)記錄

0.需求描述

在微信瀏覽器內(nèi)打開的頁面，製作一個(gè)按鈕，用戶按住按鈕後開始錄音，鬆手後停止錄音並將錄音上傳並長(zhǎng)期保存。

1.開發(fā)流程

如果開發(fā)的是普通的展示性頁面，就和開發(fā)普通的頁面沒有區(qū)別，不過這裡要用到設(shè)備（手機(jī)）的錄音功能，就需要調(diào)用微信app的錄音接口，需要使用微信jssdk。

使用微信jssdk：微信JS-SDK說明文件

• 先登入微信公眾平臺(tái)進(jìn)入「公眾號(hào)設(shè)定」的「功能設(shè)定」內(nèi)填寫「JS介面安全網(wǎng)域」。 [需要有微信公眾號(hào)]

• 引入JS檔案

• 透過config介面注入權(quán)限驗(yàn)證設(shè)定

• 透過ready介面處理成功驗(yàn)證

本次需求核心功能：錄音並保存

• //假設(shè)已引入微信jssdk?！局С质褂?AMD/CMD?標(biāo)準(zhǔn)模塊加載方法加載】
  wx.config({
  ????debug:?true,?//?開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
  ????appId:?'',?//?必填，公眾號(hào)的唯一標(biāo)識(shí)
  ????timestamp:?,?//?必填，生成簽名的時(shí)間戳
  ????nonceStr:?'',?//?必填，生成簽名的隨機(jī)串
  ????signature:?'',//?必填，簽名，見附錄1
  ????jsApiList:?[]?//?必填，需要使用的JS接口列表，所有JS接口列表見附錄2
  });
  
  wx.ready(function(){
  
  ????//?config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
  });
  
  wx.error(function(res){
  
  ????//?config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
  
  });

  2.小麻煩

要防止用戶誤操作（如：反覆點(diǎn)擊、誤觸摸）導(dǎo)致的無效錄音。

小於300ms不錄音

---

防止用戶長(zhǎng)按導(dǎo)致的瀏覽器預(yù)設(shè)彈出微信瀏覽器預(yù)設(shè)的「複製對(duì)話方塊」。

使用css設(shè)定按鈕 user-select:none;

微信播放錄音介面事件回呼函數(shù)無效

微信註冊(cè)事件一定要放在wx.ready中。

阻止預(yù)設(shè)事件

touch 事件記得加event.preventDefault(); 防火防爆

微信儲(chǔ)存靜態(tài)資源時(shí)間為3天，如何長(zhǎng)期保存

要么存到自己靜態(tài)資源時(shí)間為3天，如何長(zhǎng)期保存

或存到自己例如七牛，還可以幫我們自由轉(zhuǎn)換amr格式到mp3等格式呢！

微信伺服器預(yù)設(shè)資源格式為amr，這個(gè)格式在android機(jī)器可以使用audio標(biāo)籤播放，在ios機(jī)器使用audio標(biāo)籤無法播放。

微信錄音功能授權(quán)引發(fā)的交互問題

使用微信jssdk介面錄音，在同一個(gè)域只需要授權(quán)一次，即第一次使用錄音的時(shí)候，微信自己會(huì)彈出對(duì)話框詢問是否允許錄音，用戶點(diǎn)選允許後，之後再使用錄音時(shí)，便不會(huì)再諮詢使用者是否允許。

在第一次按住錄音後，由於用戶未曾允許錄音，微信會(huì)提示用戶授權(quán)允許在本頁使用微信錄音功能，這時(shí)用戶會(huì)放開錄音按鈕轉(zhuǎn)而去點(diǎn)擊允許，在用戶允許後，才真正會(huì)開始錄音，而此時(shí)使用者早已放開錄音按鈕，那麼錄音按鈕上便不會(huì)再有touchend事件，錄音便會(huì)一直進(jìn)行。

解決策略：使用localStorage記錄使用者是否曾授權(quán)，並以此來判斷是否需要在剛進(jìn)入頁面是自動(dòng)錄製一段錄音來觸發(fā)使用者授權(quán)

//假設(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天，而我們需要長(zhǎng)期保存，我們需要把資源從微信服務(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ù)器');//這回，我使用七牛存儲(chǔ)
????????????????},
????????????????error:?function?(xhr,?errorType,?error)?{
????????????????????console.log(error);
????????????????}
????????????});
????????}
????});
}

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

3.難題

音量：在ios設(shè)備上，bug使用微信錄音功能後，再播放audio標(biāo)籤的音頻，音量極低。

---

但是使用微信介面（wx.playVoice）播放錄音的音量是正常的，而且之後，audio標(biāo)籤的音量會(huì)有所增大（但依然音量很低）。

更多微信jssdk錄音功能開發(fā)記錄相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！