AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-02-20 13:11:23

  微信 小程序开发之录音机实例教程-音频播放 动画 (真机可用)

  

趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评!


  

老规矩,先几张图.


  

1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可.


  


  


  

2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画.


  

其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒.


  


  


  

3.我在录音完成后才加载列表.


  

下图就是从微信存储的文件里获取到的列表信息.有储存路径,创建时间,文件大小.


  

这里的文件可能不只是音频.这里我没做判断.下面的路径都是wx:file//store_...


  

我也去找了下.在Tencent/micromsg/wxafiles/wx..../这一级目录就能找到了.


  

时间是格式化之后的.文件大小是B,转成KB如下.


  


  


  

手机目录如下.但是打开之后播放不了.目前原因不明.


  


  


  


  


  

下面是文件全名称.


  

1.tempFilePath : 录音之后的临时文件.第二次进入小程序就不能正常使用了.


  

2.savedFilePath :持久保存的文件路径.值得注意的是微信只给100M的储存空间.还是尽早上传到后台吧.


  


  


  


  


  

4.播放录音音频.


  

点击item就能听到你的声音了.别被自己吓住.哈哈.


  


  


  


  


  


  


  

上代码:


  

1.index.wxml


  


  

<!--index.wxml-->


  



  


  


  


  


  2.index.wxss

  


  

/**index.wxss**/



  3.index.js

  



  


  

//index.js



  

  



  

注意:


  

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


  

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


  

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


  


  


  


  


  

demo代码下载


  


  


  

我的博客:http://blog.csdn.net/qq_31383345


  

欢迎批评!


  


  

  


  


  


  


  


298阅读 | 0评论
你的回应