先看下最终效果:
大致思路:
1,注册微信jssdk
这里有一大堆啰嗦的事情做,先在后台做签名,获取ticket,signnature,appid等等。然后判断浏览器类型为微信,传递这一堆参数到客户端。再在客户端调用微信jssdk注册voice的play,start,download等等相关事件;
2,在客户端录音并上传:
主要步骤:
-->发起录音
-->停止录音(返回localId,可以用来预览,上传至微信服务器)
-->上传录音至微信服务器(返回serverId,用来下载)
-->下载录音文件(使用微信素材中多媒体下载接口)
-->格式转换并保存服务器
a:使用wx.startRecord发起录音,这里注意的是60s限制;
b:使用手动或超过60s自动结束录音,使用stopRecord方法停止,停止成功后,会返回localId;
c:上传录音(localId)至微信服务器(uploadVoice),上传成功后会返回一个serverId;
d:因为微信的录音文件有保存期限,所以需要自己下载上传至自己的服务器;在上传微信服务器成功后,将录音文件(serverId)上传至自己的服务器,保存文件位置到数据库;
d1:根据serverId调用微信的多媒体文件下载接口,这里要取得token(token建议保存到服务器缓存或者数据库)
d2:下载后的文件是一个amr文件,需要将其转换为mp3等其他格式,这里我使用的是ffmpeg;
3,使用h5 audio在客户端播放。