Vue微信SDK 录音功能 - 好文

需求：
微信下长按按钮，弹出正在录音gif，上传录音；
在非微信下，正常显示录音gif，即做一个假的录音按钮。
在微信下，因为项目中会加载一个外部js，有一定几率会阻塞wx的初始化，所以如果在用户点击按钮时，wx sdk没有初始化，也显示假的录音按钮。

将tourch和mouse写绑定在一个button中在IOS下会出现一次录音取消长按后再执行一次 startRecord ->
stopRecord问题，所以将移动端和PC端按钮分开显示。
<button v-if="!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)" id=
"recrd_btn_mobile" class="record-button" @touchstart="startRecord" @touchend=
"stopRecord"></button> <button v-else id="recrd_btn_pc" class="record-button"
@mousedown="startRecord" @mouseup="stopRecord"></button> // 利用
_this.oRecordInfo.useWxRecord 来决定是否为假按钮值可根据情况修改 touchmoveDefault: function (e)
{ e.preventDefault(); }, startRecord: function (event) { console.log(
'startRecord') var _this = this if (!!navigator.userAgent.match(
/AppleWebKit.*Mobile.*/)) { // 移动端取消浏览器长按事件（否则在录音时会有弹出框）
document.oncontextmenu = _this.touchmoveDefault//禁止滑动事件防止在长按时
下拉窗口不能触发stopRecord document.body.addEventListener('touchmove',
_this.touchmoveDefault, {passive:false}) } if(localStorage.rainAllowRecord !==
'true' && _this.oRecordInfo.useWxRecord !== 2 && _this.oRecordInfo.useWxRecord
!==3){ // 首次进入弹出是否授权框 wx.startRecord({ success: function(){ // 授权录音
localStorage.rainAllowRecord ='true' _this.oRecordInfo.useWxRecord = 3
_this.oRecordInfo.bShowRecording =false // 控制正在录音gif显示 wx.stopRecord() return
}, cancel:function () { // 用户拒绝授权录音 _this.oRecordInfo.bShowRecording = false
_this.oRecordInfo.useWxRecord =0 if (!!navigator.userAgent.match(
/AppleWebKit.*Mobile.*/)) { document.body.removeEventListener('touchmove',
_this.touchmoveDefault) }return } }) if (_this.oRecordInfo.useWxRecord === 1) {
// 使用假录音功能 _this.oRecordInfo.useWxRecord = 2 } }
_this.oRecordInfo.bShowRecording =true _this.oRecordInfo.timer = new Date() //
防止因为js 加载时间过长导致调用录音接口失败问题实现假按钮效果 if ((_this.oRecordInfo.useWxRecord === 1 ||
_this.oRecordInfo.useWxRecord ===3) && localStorage.rainAllowRecord === 'true')
{ _this.oRecordInfo.recordTimer = setTimeout(function () { wx.startRecord({
success:function(){ console.log('wx.startRecord success')
localStorage.rainAllowRecord ='true' }, cancel: function () {
_this.oRecordInfo.bShowRecording =false } }) }, 300) } }, stopRecord: function
(event) { var _this = this console.log('stopRecord') // 回复滑动事件 if
(!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)) {
document.body.removeEventListener('touchmove', _this.touchmoveDefault) }
_this.oRecordInfo.bShowRecording =false var t = new Date() if (t -
_this.oRecordInfo.timer <300) { // 少于300毫秒不执行startRecord
clearTimeout(_this.oRecordInfo.recordTimer) }else if (t -
_this.oRecordInfo.timer <2000) { if (_this.toastInstance) {
_this.toastInstance.close() } _this.toastInstance =this.$toast({ message:
'时间太短啦重新试一次吧', position: 'bottom', duration: 1000 }) if
(_this.oRecordInfo.useWxRecord !==2) { setTimeout(function() { wx.stopRecord({
success:function(res) { console.log('updataRecord success') }, fail: function
(res) { console.log(JSON.stringify(res)) } }) }, 500) } } else {
wx.stopRecord({ success:function(res) { console.log('updataRecord success') },
fail:function(res) { console.log(JSON.stringify(res)) } }) if
(_this.oRecordInfo.timer) { _this.show_upload_next_button =true } }
_this.oRecordInfo.timer =null }
参考博客，写的很全面 <https://www.cnblogs.com/liujunyang/p/4962423.html>

热门工具换一换