怎么在微信中實現jssdk錄音功能

這篇文章將為大家詳細講解有關怎么在微信中實現jssdk錄音功能，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

調用到的微信接口

// 開始錄音接口
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
   }
  });
 },
}

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

• 在某個html元素監聽開始長按事件、結束長按事件、在屏幕上移動事件；

• 長按事件開始，這時調用微信接口wx.startRecord開始錄音;

• 長按事件結束，這時調用微信接口wx.stopRecord結束錄音，得到音頻的localId;

• 當用戶在長按過程中手指移動了，也調用wx.stopRecord結束錄音;

• 錄音結束后，調用微信接口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();
 })
})

關于怎么在微信中實現jssdk錄音功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。