最近在項目中遇到問題,需要在頁面中實現(xiàn)錄音功能,如下:
需求分析:在微信瀏覽器內(nèi)打開的頁面,制作一個按鈕,用戶按住按鈕后開始錄音,松手后停止錄音并將錄音上傳并長期保存。
1.開發(fā)流程
錄音功能需要調(diào)用微信app的錄音接口,需要使用微信jssdk。
- 先登錄微信公眾平臺進入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。[需要有微信公眾號]
- 引入JS文件
- 通過config接口注入權(quán)限驗證配置
- 通過ready接口處理成功驗證
- 通過error接口處理失敗驗證
//假設(shè)已引入微信jssdk?!局С质褂?AMD/CMD 標準模塊加載方法加載】 debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。 appId: '', // 必填,公眾號的唯一標識 timestamp: , // 必填,生成簽名的時間戳 nonceStr: '', // 必填,生成簽名的隨機串 signature: '',// 必填,簽名,見附錄1 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2 // config信息驗證后會執(zhí)行ready方法,所有接口調(diào)用都必須在config接口獲得結(jié)果之后,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調(diào)用相關(guān)接口,則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口,則可以直接調(diào)用,不需要放在ready函數(shù)中。 // config信息驗證失敗會執(zhí)行error函數(shù),如簽名過期導(dǎo)致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數(shù)中查看,對于SPA可以在這里更新簽名。
本次需求核心功能:錄音并保存
//假設(shè)全局變量已經(jīng)在外部定義 $('#talk_btn').on('touchstart', function(event){ START = new Date().getTime(); recordTimer = setTimeout(function(){ localStorage.rainAllowRecord = 'true'; $('#talk_btn').on('touchend', function(event){ END = new Date().getTime(); clearTimeout(recordTimer); success: function (res) { voice.localId = res.localId; alert(JSON.stringify(res)); //調(diào)用微信的上傳錄音接口把本地錄音先上傳到微信的服務(wù)器 //不過,微信只保留3天,而我們需要長期保存,我們需要把資源從微信服務(wù)器下載到自己的服務(wù)器 localId: voice.localId, // 需要上傳的音頻的本地ID,由stopRecord接口獲得 isShowProgressTips: 1, // 默認為1,顯示進度提示 success: function (res) { //把錄音在微信服務(wù)器上的id(res.serverId)發(fā)送到自己的服務(wù)器供下載。 data: JSON.stringify(res), success: function (data) { alert('文件已經(jīng)保存到七牛的服務(wù)器');//這回,我使用七牛存儲 error: function (xhr, errorType, error) { //注冊微信播放錄音結(jié)束事件【一定要放在wx.ready函數(shù)內(nèi)】 success: function (res) {
2.小麻煩(需要后臺轉(zhuǎn)碼,微信下載的是amr文件,audio不支持,需要轉(zhuǎn)碼之后進行播放)要防止用戶誤操作(如:反復(fù)點擊、誤觸摸)導(dǎo)致的無效錄音。
小于300ms不錄音
防止用戶長按導(dǎo)致的瀏覽器默認彈出微信瀏覽器默認的“復(fù)制對話框”。
使用css設(shè)置按鈕 user-select:none;
微信播放錄音接口事件回調(diào)函數(shù)無效
微信注冊事件一定要放在wx.ready中。
阻止默認事件
touch 事件記得加 event.preventDefault(); 防火防爆
微信存儲靜態(tài)資源時間為3天,如何長期保存
要么存到自己服務(wù)器,要么利用其它資源,比如七牛,還可以幫我們自由轉(zhuǎn)換amr格式到mp3等格式呢!
微信服務(wù)器默認資源格式為amr,這個格式在android機器可以使用audio標簽播放,在ios機器使用audio標簽無法播放。
微信錄音功能授權(quán)引發(fā)的交互問題
使用微信jssdk接口錄音,在同一個域只需要授權(quán)一次,即第一次使用錄音的時候,微信自己會彈出對話框詢問是否允許錄音,用戶點擊允許后,之后再使用錄音時,便不會再咨詢用戶是否允許。
在第一次按住錄音后,由于用戶未曾允許錄音,微信會提示用戶授權(quán)允許在本頁面使用微信錄音功能,這時用戶會放開錄音按鈕轉(zhuǎn)而去點擊允許,在用戶允許后,才真正會開始錄音,而此時用戶早已放開錄音按鈕,那么錄音按鈕上便不會再有touchend事件,錄音便會一直進行。
解決策略:使用localStorage記錄用戶是否曾授權(quán),并以此來判斷是否需要在剛進入頁面是自動錄一段錄音來觸發(fā)用戶授權(quán)
if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){ localStorage.rainAllowRecord = 'true';
|