微信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播放服務器資源。原因是不確定該音頻本地是否存在，剛剛錄音的音頻肯定是存在的。