小編給大家分享一下微信中jssdk錄音功能開發(fā)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

靈丘網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

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

0.需求描述

在微信瀏覽器內(nèi)打開的頁面，制作一個按鈕，用戶按住按鈕后開始錄音，松手后停止錄音并將錄音上傳并長期保存。

1.開發(fā)流程

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

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

• 先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。[需要有微信公眾號]

• 引入JS文件

• 通過config接口注入權(quán)限驗(yàn)證配置

• 通過ready接口處理成功驗(yàn)證

• 通過error接口處理失敗驗(yàn)證

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

wx.ready(function(){

    // config信息驗(yàn)證后會執(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ù)中。
});

wx.error(function(res){

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

});

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

//假設(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.小麻煩

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

小于300ms不錄音

防止用戶長按導(dǎo)致的瀏覽器默認(rèn)彈出微信瀏覽器默認(rèn)的“復(fù)制對話框”。

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

微信播放錄音接口事件回調(diào)函數(shù)無效

微信注冊事件一定要放在wx.ready中。

阻止默認(rèn)事件

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

微信存儲靜態(tài)資源時間為3天，如何長期保存

要么存到自己服務(wù)器，要么利用其它資源，比如七牛，還可以幫我們自由轉(zhuǎn)換amr格式到mp3等格式呢！
微信服務(wù)器默認(rèn)資源格式為amr，這個格式在android機(jī)器可以使用audio標(biāo)簽播放，在ios機(jī)器使用audio標(biāo)簽無法播放。

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

使用微信jssdk接口錄音，在同一個域只需要授權(quán)一次，即第一次使用錄音的時候，微信自己會彈出對話框詢問是否允許錄音，用戶點(diǎn)擊允許后，之后再使用錄音時，便不會再咨詢用戶是否允許。
在第一次按住錄音后，由于用戶未曾允許錄音，微信會提示用戶授權(quán)允許在本頁面使用微信錄音功能，這時用戶會放開錄音按鈕轉(zhuǎn)而去點(diǎn)擊允許，在用戶允許后，才真正會開始錄音，而此時用戶早已放開錄音按鈕，那么錄音按鈕上便不會再有touchend事件，錄音便會一直進(jìn)行。
解決策略：使用localStorage記錄用戶是否曾授權(quán)，并以此來判斷是否需要在剛進(jìn)入頁面是自動錄一段錄音來觸發(fā)用戶授權(quán)

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

3.難題

音量bug：在ios設(shè)備上，使用微信錄音功能后，再播放audio標(biāo)簽的音頻，音量極低。
但是使用微信接口（wx.playVoice）播放錄音的音量是正常的，而且之后，audio標(biāo)簽的音量會有所增大（但是依然音量很低）。

以上是“微信中jssdk錄音功能開發(fā)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！