美文网首页微信开发运营Web前端之路让前端飞
「微信小程序」24,在小程序中使用录音接口

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

作者: 石桥码农 | 来源:发表于2017-05-07 00:29 被阅读4204次


    小程序的录音功能,仅是提供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-

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

    相关文章

      网友评论

      • 寻水鱼:录音文件怎样上传都java后台呢,后台怎样接收是关键

      本文标题:「微信小程序」24,在小程序中使用录音接口

      本文链接:https://www.haomeiwen.com/subject/siaytxtx.html