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

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

老规矩,先几张图.

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

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!--index.wxml-->  
  2. <scroll-view>  
  3.  <view wx:if="{{voices}}" class="common-list" style="margin-bottom:120rpx;">  
  4. <block  wx:for="{{voices}}">  
  5.      <view class="board">  
  6.                     <view class="cell"  >  
  7.                         <view class="cell-bd" data-key="{{item.filePath}}" bindtap="gotoPlay" >   
  8.                             <view  class="date">存储路径:{{item.filePath}}</view>  
  9.                             <view  class="date" >存储时间:{{item.createTime}}</view>  
  10.                             <view  class="date">音频大小:{{item.size}}KB</view>  
  11.                         </view>    
  12.                           
  13.                     </view>  
  14.         </view>  
  15. </block>  
  16.  </view>  
  17.  </scroll-view>  
  18.    
  19. <view  wx:if="{{isSpeaking}}"  class="speak-style">  
  20. <image class="sound-style" src="../../images/voice_icon_speech_sound_1.png" ></image>  
  21. <image wx:if="{{j==2}}" class="sound-style" src="../../images/voice_icon_speech_sound_2.png" ></image>  
  22. <image wx:if="{{j==3}}" class="sound-style" src="../../images/voice_icon_speech_sound_3.png" ></image>  
  23. <image wx:if="{{j==4}}" class="sound-style" src="../../images/voice_icon_speech_sound_4.png" ></image>  
  24. <image wx:if="{{j==5}}"class="sound-style" src="../../images/voice_icon_speech_sound_5.png" ></image>  
  25.  </view>  
  26.  <view class="record-style">  
  27.  <button class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按住 录音</button>  
  28.  </view>  



2.index.wxss

[css]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. /**index.wxss**/  
  2. .speak-style{  
  3.     positionrelative;  
  4.     height240rpx;  
  5.     width240rpx;  
  6.     border-radius: 20rpx;  
  7.     margin50% auto;  
  8.     background#26A5FF;  
  9. }  
  10. .item-style{  
  11.     margin-top30rpx;  
  12.     margin-bottom30rpx;  
  13. }  
  14. .text-style{  
  15.     text-aligncenter;  
  16.   
  17. }  
  18. .record-style{  
  19.     positionfixed;  
  20.     bottom: 0;  
  21.     left: 0;  
  22.     height120rpx;  
  23.     width100%;  
  24. }  
  25. .btn-style{  
  26.   margin-left30rpx;  
  27.   margin-right30rpx;  
  28. }  
  29.   
  30. .sound-style{  
  31.   positionabsolute;  
  32.   width74rpx;  
  33.   height:150rpx;  
  34.   margin-top45rpx;  
  35.   margin-left83rpx;  
  36. }  
  37.   
  38.   
  39. .board {  
  40.   overflowhidden;  
  41.   border-bottom2rpx solid #26A5FF;    
  42. }  
  43. /*列布局*/  
  44. .cell{  
  45.     display: flex;  
  46.     margin20rpx;  
  47. }  
  48. .cell-hd{  
  49.     margin-left10rpx;  
  50.     color#885A38;  
  51. }  
  52. .cell .cell-bd{  
  53.     flex:1;  
  54.     positionrelative;  
  55.      
  56. }  
  57. /**只显示一行*/  
  58. .date{  
  59.     font-size30rpx;  
  60.     text-overflow: ellipsis;   
  61.     white-space:nowrap;  
  62.     overflow:hidden;   
  63. }  

3.index.js

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //index.js  
  2. //获取应用实例  
  3. var app = getApp()  
  4. Page({  
  5.   data: {  
  6.     j: 1,//帧动画初始图片  
  7.     isSpeaking: false,//是否正在说话  
  8.     voices: [],//音频数组  
  9.   },  
  10.   onLoad: function () {  
  11.   },  
  12.   //手指按下  
  13.   touchdown: function () {  
  14.     console.log("手指按下了...")  
  15.     console.log("new date : " + new Date)  
  16.     var _this = this;  
  17.     speaking.call(this);  
  18.     this.setData({  
  19.       isSpeaking: true  
  20.     })  
  21.     //开始录音  
  22.     wx.startRecord({  
  23.       success: function (res) {  
  24.         //临时路径,下次进入小程序时无法正常使用  
  25.         var tempFilePath = res.tempFilePath  
  26.         console.log("tempFilePath: " + tempFilePath)  
  27.         //持久保存  
  28.         wx.saveFile({  
  29.           tempFilePath: tempFilePath,  
  30.           success: function (res) {  
  31.             //持久路径  
  32.             //本地文件存储的大小限制为 100M  
  33.             var savedFilePath = res.savedFilePath  
  34.             console.log("savedFilePath: " + savedFilePath)  
  35.           }  
  36.         })  
  37.         wx.showToast({  
  38.           title: '恭喜!录音成功',  
  39.           icon: 'success',  
  40.           duration: 1000  
  41.         })  
  42.         //获取录音音频列表  
  43.         wx.getSavedFileList({  
  44.           success: function (res) {  
  45.             var voices = [];  
  46.             for (var i = 0; i < res.fileList.length; i++) {  
  47.               //格式化时间  
  48.               var createTime = new Date(res.fileList[i].createTime)  
  49.               //将音频大小B转为KB  
  50.               var size = (res.fileList[i].size / 1024).toFixed(2);  
  51.               var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size };  
  52.               console.log("文件路径: " + res.fileList[i].filePath)  
  53.               console.log("文件时间: " + createTime)  
  54.               console.log("文件大小: " + size)  
  55.               voices = voices.concat(voice);  
  56.             }  
  57.             _this.setData({  
  58.               voices: voices  
  59.             })  
  60.           }  
  61.         })  
  62.       },  
  63.       fail: function (res) {  
  64.         //录音失败  
  65.         wx.showModal({  
  66.           title: '提示',  
  67.           content: '录音的姿势不对!',  
  68.           showCancel: false,  
  69.           success: function (res) {  
  70.             if (res.confirm) {  
  71.               console.log('用户点击确定')  
  72.               return  
  73.             }  
  74.           }  
  75.         })  
  76.       }  
  77.     })  
  78.   },  
  79.   //手指抬起  
  80.   touchup: function () {  
  81.     console.log("手指抬起了...")  
  82.     this.setData({  
  83.       isSpeaking: false,  
  84.     })  
  85.     clearInterval(this.timer)  
  86.     wx.stopRecord()  
  87.   },  
  88.   //点击播放录音  
  89.   gotoPlay: function (e) {  
  90.     var filePath = e.currentTarget.dataset.key;  
  91.     //点击开始播放  
  92.     wx.showToast({  
  93.       title: '开始播放',  
  94.       icon: 'success',  
  95.       duration: 1000  
  96.     })  
  97.     wx.playVoice({  
  98.       filePath: filePath,  
  99.       success: function () {  
  100.         wx.showToast({  
  101.           title: '播放结束',  
  102.           icon: 'success',  
  103.           duration: 1000  
  104.         })  
  105.       }  
  106.     })  
  107.   }  
  108. })  
  109. //麦克风帧动画  
  110. function speaking() {  
  111.   var _this = this;  
  112.   //话筒帧动画  
  113.   var i = 1;  
  114.   this.timer = setInterval(function () {  
  115.     i++;  
  116.     i = i % 5;  
  117.     _this.setData({  
  118.       j: i  
  119.     })  
  120.   }, 200);  
  121. }  


注意:

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

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

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值