[轉] 微信jssdk錄音功能開發記錄

微信jssdk錄音功能開發記錄   推薦看原文

標籤（空格分隔）： 前端

---

0.需求描述

在微信瀏覽器內打開的頁面，製做一個按鈕，用戶按住按鈕後開始錄音，鬆手後中止錄音並將錄音上傳並長期保存。

---

1.開發流程

若是開發的是普通的展現性頁面，就和開發普通的頁面沒有區別，不過這裏要用到設備（手機）的錄音功能，就須要調用微信app的錄音接口，須要使用微信jssdk。

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

• 先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。[須要有微信公衆號]
• 引入JS文件
• 經過config接口注入權限驗證配置
• 經過ready接口處理成功驗證
• 經過error接口處理失敗驗證

//假設已引入微信jssdk。【支持使用 AMD/CMD 標準模塊加載方法加載】 wx.config({ debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。 appId: '', // 必填，公衆號的惟一標識 timestamp: , // 必填，生成簽名的時間戳 nonceStr: '', // 必填，生成簽名的隨機串 signature: '',// 必填，簽名，見附錄1 jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2 }); wx.ready(function(){ // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。 }); wx.error(function(res){ // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。 });

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

//假設全局變量已經在外部定義 //按下開始錄音 $('#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('用戶拒絕受權錄音'); } }); },300); }); //鬆手結束錄音 $('#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(){ //調用微信的上傳錄音接口把本地錄音先上傳到微信的服務器 //不過，微信只保留3天，而咱們須要長期保存，咱們須要把資源從微信服務器下載到本身的服務器 wx.uploadVoice({ localId: voice.localId, // 須要上傳的音頻的本地ID，由stopRecord接口得到 isShowProgressTips: 1, // 默認爲1，顯示進度提示 success: function (res) { //把錄音在微信服務器上的id（res.serverId）發送到本身的服務器供下載。 $.ajax({ url: '後端處理上傳錄音的接口', type: 'post', data: JSON.stringify(res), dataType: "json", success: function (data) { alert('文件已經保存到七牛的服務器');//這回，我使用七牛存儲 }, error: function (xhr, errorType, error) { console.log(error); } }); } }); } //註冊微信播放錄音結束事件【必定要放在wx.ready函數內】 wx.onVoicePlayEnd({ success: function (res) { stopWave(); } });

---

2.小麻煩

要防止用戶誤操做（如：反覆點擊、誤觸摸）致使的無效錄音。

小於300ms不錄音

防止用戶長按致使的瀏覽器默認彈出微信瀏覽器默認的「複製對話框」。

使用css設置按鈕 user-select:none;

微信播放錄音接口事件回調函數無效

微信註冊事件必定要放在wx.ready中。

阻止默認事件

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

微信存儲靜態資源時間爲3天，如何長期保存

要麼存到本身服務器，要麼利用其它資源，好比七牛，還能夠幫咱們自由轉換amr格式到mp3等格式呢！
微信服務器默認資源格式爲amr，這個格式在android機器能夠使用audio標籤播放，在ios機器使用audio標籤沒法播放。

微信錄音功能受權引起的交互問題

使用微信jssdk接口錄音，在同一個域只須要受權一次，即第一次使用錄音的時候，微信本身會彈出對話框詢問是否容許錄音，用戶點擊容許後，以後再使用錄音時，便不會再諮詢用戶是否容許。
在第一次按住錄音後，因爲用戶不曾容許錄音，微信會提示用戶受權容許在本頁面使用微信錄音功能，這時用戶會放開錄音按鈕轉而去點擊容許，在用戶容許後，才真正會開始錄音，而此時用戶早已放開錄音按鈕，那麼錄音按鈕上便不會再有touchend事件，錄音便會一直進行。
解決策略：使用localStorage記錄用戶是否曾受權，並以此來判斷是否須要在剛進入頁面是自動錄一段錄音來觸發用戶受權

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

---

3.難題

音量bug：在ios設備上，使用微信錄音功能後，再播放audio標籤的音頻，音量極低。
可是使用微信接口（wx.playVoice）播放錄音的音量是正常的，並且以後，audio標籤的音量會有所增大（可是依然音量很低）。

該問題正在溝通微信相關技術人員。
暫時的解決策略爲：對於剛剛錄音的音頻，使用wx.playVoice來播放，不然使用audio播放服務器資源。緣由是不肯定該音頻本地是否存在，剛剛錄音的音頻確定是存在的。

原文地址: http://www.cnblogs.com/liujunyang/p/4962423.html