項目需求簡單描述
用戶長按錄音，松手后直接結束錄音，結束錄音后，用戶可以選擇重新錄音、播放剛才的錄音，上傳錄音（這里的上傳錄音指上傳到自己服務器，上傳步驟是，前端調用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.調用微信錄音超過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.終極問題：某些手機屏幕不靈敏導致長按錄音出現各種各樣的問題
描述：在初次完成長按錄音的功能后，我在公司多臺貼了膜或者屏幕摔爛的手機測試發現，這些手機長按、和取消長按的事件相當不靈敏，誤差很大，有時莫名其秒地結束錄音，體驗非常差。
解決方案：我們和產品經過商量，擺出這個避免不了的問題，最終把長按錄音的交互模式改成了點擊錄音。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
