項目需求簡單描述

用戶長按錄音，松手后直接結束錄音，結束錄音后，用戶可以選擇重新錄音、播放剛才的錄音，上傳錄音（這里的上傳錄音指上傳到自己服務器，上傳步驟是，前端調用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   }  }); },}