項目需求簡單描述
用戶長按錄音,松手后直接結束錄音,結束錄音后,用戶可以選擇重新錄音、播放剛才的錄音,上傳錄音(這里的上傳錄音指上傳到自己服務器,上傳步驟是,前端調用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結構:
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(); }) })
4.終極問題:某些手機屏幕不靈敏導致長按錄音出現各種各樣的問題
描述:在初次完成長按錄音的功能后,我在公司多臺貼了膜或者屏幕摔爛的手機測試發現,這些手機長按、和取消長按的事件相當不靈敏,誤差很大,有時莫名其秒地結束錄音,體驗非常差。
解決方案:我們和產品經過商量,擺出這個避免不了的問題,最終把長按錄音的交互模式改成了點擊錄音。
最后,參考鏈接:http://www.cnblogs.com/liujun...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98585.html
摘要:具體請看我在提問里的回答下載七牛云文件間歇性失敗總結至此,在微信開發中關于錄音這一塊兒的功能,就已經介紹完畢。 showImg(https://segmentfault.com/img/remote/1460000013595733?w=454&h=339); 原文是在我自己博客中,小伙伴也可以點閱讀原文進行跳轉查看,還有好聽的背景音樂噢~ ????一年的時間里,前前后后都在搞微信開發...
摘要:前言微信小程序中可以直接運行頁面,這一新組件的產生,可能直接導致小程序數量迎來一波高峰。微信小程序配置系列問題配置域名業務域名中配置的就是小程序以及和中引用的域名。 今日勵志語 要接受自己行動所帶來的責任而非自己成就所帶來的榮耀。 前言 微信小程序中可以直接運行 web 頁面,這一新組件 web-view 的產生,可能直接導致小程序數量迎來一波高峰。本篇博文將從業務選型,微信小程序后臺...
摘要:開源庫隨著支持功能的增多,音頻轉碼處理效率漸漸的跟不上需求了,近期抽時間對音頻轉碼部分進行了升級優化,以支持更多實用的功能。基于以上兩點問題,似乎只有多線程能夠解決。 Recorder H5 GitHub開源庫隨著支持功能的增多,音頻轉碼處理效率漸漸的跟不上需求了,近期抽時間對音頻轉碼部分進行了升級優化,以支持更多實用的功能。另外IOS的Hybrid App也完成了移植,Android...
閱讀 2884·2021-10-26 09:49
閱讀 3221·2021-10-14 09:42
閱讀 2042·2021-09-13 10:31
閱讀 2580·2019-08-30 11:13
閱讀 2962·2019-08-29 16:31
閱讀 1068·2019-08-29 13:58
閱讀 1858·2019-08-29 12:12
閱讀 3554·2019-08-26 13:48