微信H5中JSSDK 录音识别注意事项记录

小尼姑年方28

已于 2024-08-30 16:43:50 修改

阅读量545

点赞数 9

文章标签：微信公众平台 js

于 2024-08-30 16:41:46 首次发布

本文链接：https://blog.csdn.net/qq_35035468/article/details/141720803

版权

微信H5中JSSDK 录音识别注意事项记录

问题一：长按按钮录制时，IOS 会触发文本复制功能

解决方案：在按钮的css上添加样式：user-select: none;

问题二：首次进入H5页面后调用`wx.startRecord`时会触发微信授权，可能会导致一直停留在录制界面

解决方案：建议在切换录音识别的按钮上触发一次wx.startRecord，并且立马调用wx.stopRecord
当然不需要每次都触发，主要当前用户未授权则需要触发，可以弄一个标记。
例如：

if (!localStorage.getItem('rainAllowRecord') || localStorage.getItem('rainAllowRecord') !== 'true') {
    wx.startRecord({
        success: function(){
            localStorage.setItem('rainAllowRecord', 'true');
            wx.stopRecord();
        },
        cancel: function () {
            alert('用户拒绝授权录音');
        }
    });
}

问题三：IOS有时候touchend事件不触发。

解决方案：将@touchcancel事件也加入进去。

- @touchStart="touchStart"
- @touchend="touchEnd"
- @touchcancel="touchEnd"

问题四：IOS 长按触发开始录制的瞬间松开触摸，可能导致`touchend`优先于`wx.startRecord`执行

原因：wx.startRecord函数是放到touchStart方法中执行的，wx.startRecord执行比较耗时，这时候触摸松开touchend可能就已经在执行了，会导致本次录音失败。
解决方案：在touchend方法执行第一行记录一个时间戳：touchEndTime=new Date().getTime();
当执行wx.startRecord成功后判断：new Date().getTime() - touchEndTime <600，如果为True则执行wx.stopRecord
参考代码：

let touchEndTime = null;
// 触摸结束方法
function touchEnd (){
	touchEndTime=new Date().getTime();
	 ...... 
}
wx.startRecord({
    success: function(){
    	let now = new Date().getTime();
    	if(touchEndTime && now - this.touchEndTime <600){
    		wx.stopRecord()
    		alert('录音时间过短。');
    	}
    },
    cancel: function () {
    	alert('用户拒绝授权录音');
    }
});
//