微信小程序录音功能如何实现?
微信小程序录音功能如何实现?录音功能是很多电子设备的常用功能,特别是手机,但是如果在小程序里添加这个功能又该怎么实现呢?下面小编带大家了解一下吧。
微信小程序录音功能如何实现?
在微信小程序内打开的小程序页面,制作一个按钮,用户按住按钮后开始录音,松手后停止录音并将录音上传并长期保存。
1.开发流程
如果开发的是普通的展示*页面,就和开发普通的页面没有区别,不过这里要用到设备(手机)的录音功能,就需要调用微信app的录音接口,需要使用微信jssdk。
使用微信jssdk:
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
引入小程序JS文件
通过config接口注入权限验证配置
通过ready接口处理成功验证
通过error接口处理失败验证
本次需求核心小程序功能:录音并保存
2.小麻烦
要防止用户误操作(如:反复点击、误触摸)导致的无效录音。
小于300ms不录音
防止用户长按导致的浏览器默认弹出微信浏览器默认的“复制对话框”。
使用css设置按钮 user-select:none;
微信播放录音接口事件回调函数无效
微信注册事件一定要放在wx.ready中。
阻止默认事件
touch 事件记得加 event.preventDefault(); 防火防爆
微信存储静态资源时间为3天,如何长期保存
要么存到自己服务器,要么利用其它资源,比如七牛,还可以帮我们自由转换amr格式到mp3等格式呢!
微信服务器默认资源格式为amr,这个格式在android机器可以使用audio标签播放,在ios机器使用audio标签无法播放。
微信录音功能授权引发的交互问题
使用微信jssdk接口录音,在同一个域只需要授权一次,即第一次使用录音的时候,微信自己会弹出对话框询问是否允许录音,用户点击允许后,之后再使用录音时,便不会再咨询用户是否允许。
在第一次按住录音后,由于用户未曾允许录音,微信会提示用户授权允许在本页面使用微信录音功能,这时用户会放开录音按钮转而去点击允许,在用户允许后,才真正会开始录音,而此时用户早已放开录音按钮,那么录音按钮上便不会再有touchend事件,录音便会一直进行。
解决策略:使用localStorage记录用户是否曾授权,并以此来判断是否需要在刚进入页面是自动录一段录音来触发用户授权
以上就是小编给大家找的微信小程序录音功能如何实现的全部内容了,是不是有点复杂?但是我相信大家仔细认真的学习还是没问题的,赶紧去试试吧。如果你还有其他疑问,可以来我们微小乔哦!
相关推荐:
微信小程序录音格式怎么转换?
微信小程序录音界面怎么修改?
微信小程序录音授权关键代码
上一篇:微信小程序录音时长怎么获取?
下一篇:微信小程序录音上传怎么弄?