微信JSSDK录音功能开发遇到的坑

简介: 1、在进行微信网页录音功能开发的时候,微信jssdk初始化一定要把用到的方法写在isApiList中,不然调用方法起不到效果。 2、微信录音前会弹出“是否允许录音”,点击是才会执行wx.startRecord函数success回调,否则执行fail。所有,要把微信录音中的动作写在succe

1、在进行微信网页录音功能开发的时候,微信jssdk初始化一定要把用到的方法写在wx.config配置信息jsApiList中,不然调用方法起不到效果。

 
jsApiList: ['onMenuShareAppMessage','translateVoice','onVoiceRecordEnd','stopVoice'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

2、微信录音前会弹出“是否允许录音”,点击是才会执行wx.startRecord函数success回调,否则执行fail。所以,要把微信录音过程中相关的动作写在success回调里。**这个‘是否允许录音’提示很没有规律,在开始调试的时候很正常,只有在第一次录音和一定时间之后(这个时间没有找到规律到底是多长)弹出提示;不正常的是有段时间,微信每次都会弹出这个提示,并且在有些手机上会卡住,必须点击返回才能正常录音。

3、微信录音到60秒时会出现不执行wx.uploadVoice的bug,导致音频获取不到,解决方法是在录音到59秒的时候停止录音。微信有一个到60秒自动停止的方法,碰到的问题是进入这个方法,到60秒会自动停止,但不会执行后面的上传语音的逻辑,只是把录音停止了,写的其他动作都没执行。

wx.onVoiceRecordEnd({
    // 录音时间超过一分钟没有停止的时候会执行 complete 回调
    complete: function (res) {
        var localId = res.localId; 
    }
});


4、微信录音后会返回本地音频地址,可以用wx.playVoice直接播放,上传数据时则要用wx.uploadVoice获取mediaId后上传这个数据,本地音频地址是不能上传的。等播放的时候用wx.downVoice以mediaId为参数再下载到本地播放本地音频文件。微信只会保留3天,3天过后mediaID就会失效,所以在3天内要把资源下载到自己的服务器中。

5、连续播放微信本地音频:录音之后会直接得到本地音频地址,可以用来直接播放,所以在录音页面连续播放音频时,会少一个下载音频的逻辑。如果进行连续点击音频进行播放,会导致微信方法崩溃掉,所以要加一个统一开关使音频回归到初始状态,这样再次点击时,就不会出现bug。注意:这个回归到初始化的方法要用wx.stopVoice方法。再连续播放时是自动进行的,所以这个地方也要加一个初始化操作。就是在播放每一个音频之前都加一个初始化操作,这个地方ios和Android处理方法不一样,ios要用wx.pauseVoice方法,Android要用wx.stopVoice才可以。

6、连续播放微信mediaID音频文件:在播放之前要用wx.downLoadVoice下载到本地,然后播放本地音频文件,这个地方用到了异步获取资源的操作了,这个时候在初始化时不能用遍历所有音频文件进行停止操作,需要在停止前进行判断,找出正在播放的进行停止。

7、连续播放自己服务器音频文件:这个时候用到audio标签播放,需要异步获取音频地址,所以不能再页面初始化的时候进行获取,会导致获取的结果顺序乱掉,需要在点击音频的时候在获取当前音频的url。这个时候会出现audio在某些手机上不能播放的兼容问题,就是audio地址如果是异步获取的,在第一次的时候播放不出来。解决方法是在页面中写入一个audio标签,src中放入一个时长1s的音频,在点击的时候就播放,然后异步获取音频url再进行替换。注意:ios是没有这个bug的,所以ios是不能用这个方法,如果用了就会出现bug。

8、监听audio音频播放停止事件,用到了audio标签的ended属性,如果停止了返回true。给audio标签添加监听事件,这个时候用于连续播放功能的记录顺序的下标要用全局变量。


**其他网友遇总结的问题地址:http://www.henkuai.com/thread-11227-1-1.html

058600a2a949d23567e827d2d60e226c87fc8f88


相关文章
|
4天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
4天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
4天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
4天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
4天前
|
SQL 安全 小程序
探索微信小程序全栈开发的安全性问题
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的安全性问题,包括数据安全、接口安全、隐私保护和代码安全。为解决这些问题,建议采取数据加密、使用HTTPS协议、身份认证与授权、输入验证、安全审计及漏洞扫描以及安全培训等措施。通过这些方法,开发者可提升小程序安全性,保护用户隐私和数据。
|
26天前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
25 2
|
1月前
|
移动开发 小程序 API
微信小程序的一些开发限制
微信小程序的一些开发限制
64 1
|
1月前
|
JSON 小程序 前端开发
微信小程序开发入门学习01-TDesign模板解读
微信小程序开发入门学习01-TDesign模板解读
|
1月前
|
小程序 数据可视化 开发者
微信小程序开发入门介绍-布局组件
微信小程序开发入门介绍-布局组件
|
1月前
|
小程序 数据可视化 前端开发
微信小程序开发入门教程-文本组件介绍
微信小程序开发入门教程-文本组件介绍

热门文章

最新文章