1. 程式人生 > >呼叫微信sdk介面的錄音功能

呼叫微信sdk介面的錄音功能

一定要引入jweixin-1.0.0.js

先來一段html程式碼:

<div class="btn">錄音</div>

看看js是如何操作的

// 手指按下錄音
      $('.btn').on('touchstart', function(event){
    event.preventDefault();//阻止瀏覽器預設行為
    START = new Date().getTime();
    $('.timggif').css({display:'block'})
    recordTimer = setTimeout(function(){
        wx.startRecord({
            success: function(){
                localStorage.rainAllowRecord = 'true';
            },
            cancel: function () {
                alert('使用者拒絕授權錄音');
            }
        });
    },300);
});
//鬆手結束錄音
$('.btn').on('touchend', function(event){
    event.preventDefault();//阻止瀏覽器預設行為
    END = new Date().getTime();
    $('.timggif').css({display:'none'})
    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介面獲得
        success: function (res) {
            //把錄音在微信伺服器上的id(res.serverId)傳送到自己的伺服器供下載。\
//JSON.stringify(res)
//alert("111");
            $.ajax({
async: false,
type: 'post',
                url: '你的伺服器下載音訊路徑',
                data: { serverId:res.serverId,errMsg:res.errMsg},
                dataType: "text",
                success: function (data) {
alert('上傳語音成功');
                   // alert('檔案已經儲存到伺服器');//儲存到伺服器
                },
                error: function (xhr, errorType, error) {
                    alert('error');
                }
            });
        }
    });
}


//註冊微信播放錄音結束事件【一定要放在wx.ready函式內】
wx.onVoicePlayEnd({
    success: function (res) {
        stopWave();
    }
});