「微信小程序」24,在小程序中使用录音接口


小程序的录音功能,仅是提供API,并没有提供可视的UI组件,不宜在产品中直接使用。这里有一个实现了录音动画的demo,可学习。

先看运行效果:

源码从这里下载:

https://git.oschina.net/rixingyike/weapp-demo

录音demo位于pages/record/index目录下。

实现简析——

在“按住录音”按钮上绑定了touchstart与touchend事件,当按下时,isSpeaking为true,抬头为false。

动画是通过5张图片实现的,最下面一张图片是底图,绘有全部轮廓,其余四张仅是横线。当isSpeaking为true,启用了一个setInterval每隔200毫秒变一次桢数,每一桢对应一个图片,以此实现动画。在cocos2d中,那些看似很酷的动画效果,都是基于这种朴素的动画思想实现的。

为什么是200毫秒?这是是人类眼睛可以感知的最小阀值。

示例源码并没有将声音上传至服务器,在实际项目中不能完全照搬使用。

注意:

1,录音的音频默认是存在本地的临时路径下.第二次进入小程序无法正常使用,可以存持久,但是本地文件大小的限制是100M,最好还是上传后台。

2,录音的时间不能太短.否则会失败;也不能超过60秒.到了60秒会自动停止录音。

3,音频播放不能同时播放多个音频.看文档.微信小程序 播放音频文档。

该示例源码修改自:http://blog.csdn.NET/qq_31383345,请向作者致敬。

广告:有一位智能秘书陪伴学习,是一种什么体验? - 知乎专栏

-END-

欢迎关注我的微信公众号哲学李论,回复“微信小程序”,查看所有内容。

你可能感兴趣的:(「微信小程序」24,在小程序中使用录音接口)