微信開發之微信jssdk錄音功能開發

項目需求簡單描述

用戶長按錄音，鬆手後直接結束錄音，結束錄音後，用戶能夠選擇從新錄音、播放剛纔的錄音，上傳錄音（這裏的上傳錄音指上傳到本身服務器，上傳步驟是，前端調用wx.uploadVoice，後臺再到微信服務器下載音頻文件，上傳到本身的服務器）。注意，音頻文件自上傳時間算起在微信服務器的有效期爲3天。因爲後臺從微信服務器下載的音頻文件是amr格式的，須要後臺先把amr文件轉換成MP3，前端用audio播放。咱們公司是購買阿里雲的媒體處理服務進行文件轉碼的。

調用到的微信接口

// 開始錄音接口
wx.startRecord();

// 中止錄音接口
wx.stopRecord({
success: function (res) {
    var localId = res.localId;
  }
});

// 監聽錄音自動中止接口
wx.onVoiceRecordEnd({
  // 錄音時間超過一分鐘沒有中止的時候會執行 complete 回調
  complete: function (res) {
    var localId = res.localId;
  }
});

// 播放語音接口
wx.playVoice({
  localId: '' // 須要播放的音頻的本地ID，由stopRecord接口得到
});

// 暫停播放接口
wx.pauseVoice({
  localId: '' // 須要暫停的音頻的本地ID，由stopRecord接口得到
});

// 監聽語音播放完畢接口
wx.onVoicePlayEnd({wx.onVoice
  success: function (res) {
    var localId = res.localId; // 返回音頻的本地ID
  }
});

// 上傳語音接口
wx.uploadVoice({
  localId: '', // 須要上傳的音頻的本地ID，由stopRecord接口得到
  isShowProgressTips: 1, // 默認爲1，顯示進度提示
  success: function (res) {
    var serverId = res.serverId; // 返回音頻的服務器端ID
  }
});

主要涉及的知識點

//項目用到的框架：vue.js
@touchstart // 手指觸碰屏幕，開始長按
@touchend //手指離開屏幕，結束長按
@touchmove //手指在屏幕上滑動

開發流程

說明：項目用到的框架：Vue
1.引入微信jssdk,作好微信配置

2.HTML結構：

<div @touchstart="gtouchstart()" @touchend="gtouchend()" @touchmove="gtouchmove()"></div>

touchstart事件：MDN的定義是：當觸點與觸控設備表面接觸時觸發touchstart 事件，換句話來講，就是手指觸碰屏幕時觸發，因此這裏監聽開始長按。

@touchend事件：當手指從屏幕上離開的時候觸發，這裏今天長按結束。

@touchmove事件：當手指在屏幕上滑動的時候連續地觸發。在這個長按錄音的場景中，當手指在屏幕上移動了，也視爲錄音結束，因此要監聽手指在屏幕上滑動。

3.js代碼

methods:{
  gtouchstart(){
    // 當用戶長按500ms以上再真正開始錄音
    setTimeout(() => {
      this.longPress()
    }, 500)}
  },
  longPress(){
    wx.startRecord() // 微信開始錄音接口
  },
  gtouchmove(){
    wx.stopRecord({ // 微信結束錄音接口
      success: res => {
        this.localId = res.localId;
        console.log('中斷結束錄音')
      }
    })
  },
  gtouchend(){
     wx.stopRecord({ // 微信結束錄音接口
       success: res => {
         this.localId = res.localId;
         console.log('正常結束錄音成功了')
       }
    })
  },
  wxUpload() { // 上傳到微信服務器
    wx.uploadVoice({
      localId: this.localId, // 須要上傳的音頻的本地ID，由stopRecord接口得到
      isShowProgressTips: 1, // 默認爲1，顯示進度提示
      success: res => {
        this.serverId = res.serverId; // 返回音頻的服務器端ID
      }
    });
  },
}

大體過程如上面代碼所示：

1. 在某個html元素監聽開始長按事件、結束長按事件、在屏幕上移動事件；
2. 長按事件開始，這時調用微信接口wx.startRecord開始錄音;
3. 長按事件結束，這時調用微信接口wx.stopRecord結束錄音，獲得音頻的localId;
4. 當用戶在長按過程當中手指移動了，也調用wx.stopRecord結束錄音;
5. 錄音結束後，調用微信接口wx.uploadVoice把音頻上傳到微信服務器。

開發過程遇到的問題

1.調用微信錄音超過60秒時，微信會自動結束錄音而且返回一個localId，而且這個localId是無效的
解決方案：
在 wx.startRecord() 開始以前添加定時器，若是錄音時間到達59秒，執行wx.stopRecord主動中止錄音，避免用戶錄音時間過長致使錄音無效。
2.微信錄音功能受權引起的交互問題
使用微信jssdk接口錄音，在同一個域只須要受權一次，即第一次使用錄音的時候，微信本身會彈出對話框詢問是否容許錄音，用戶點擊容許後，以後再使用錄音時，便不會再諮詢用戶是否容許。
在第一次按住錄音後，因爲用戶不曾容許錄音，微信會提示用戶受權容許在本頁面使用微信錄音功能，這時用戶會放開錄音按鈕轉而去點擊容許，在用戶容許後，才真正會開始錄音，而此時用戶早已放開錄音按鈕，那麼錄音按鈕上便不會再有touchend事件，錄音便會一直進行。
解決策略：使用localStorage記錄用戶是否曾受權，並以此來判斷是否須要在剛進入頁面是自動錄一段錄音來觸發用戶受權

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

3.在ios下不能自動播放audio的問題
關於音頻的播放，爲了頁面美觀，處理方式是隱藏audio的播放控件，而後給一個按鈕添加時間，經過audio.play()來控制音頻的播放的。可是在ios下有個問題，audio.play()是不能直接播放音頻的，只能顯式地經過操做音頻的播放控件來。這是由於iOS Safari 不容許自動播放 audio，只能經過用戶交互觸發。這大概是蘋果公司出於用戶體驗而作的限制。
解決方案：

// 在頁面初始化成功後，在wx.ready的回調函數內，收到執行下面的方法，這樣ios用戶在點擊播放按鈕時就能正常播放音頻
wx.ready(() => {
  this.$nextTick(() => {
    this.$refs.audio.load()
    this.$refs.audio.play()
    this.$refs.audio.pause();
  })
})

4.終極問題：某些手機屏幕不靈敏致使長按錄音出現各類各樣的問題
描述：在初次完成長按錄音的功能後，我在公司多臺貼了膜或者屏幕摔爛的手機測試發現，這些手機長按、和取消長按的事件至關不靈敏，偏差很大，有時莫名其秒地結束錄音，體驗很是差。
解決方案：咱們和產品通過商量，擺出這個避免不了的問題，最終把長按錄音的交互模式改爲了點擊錄音。

最後，參考連接：http://www.cnblogs.com/liujun...