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

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

老规矩,先几张图.

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

 

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

 

1. /**index.wxss**/  
2. .speak-style{  
3.     position: relative;  
4.     height: 240rpx;  
5.     width: 240rpx;  
6.     border-radius: 20rpx;  
7.     margin: 50% auto;  
8.     background: #26A5FF;  
9. }  
10. .item-style{  
11.     margin-top: 30rpx;  
12.     margin-bottom: 30rpx;  
13. }  
14. .text-style{  
15.     text-align: center;  
16.   
17. }  
18. .record-style{  
19.     position: fixed;  
20.     bottom: 0;  
21.     left: 0;  
22.     height: 120rpx;  
23.     width: 100%;  
24. }  
25. .btn-style{  
26.   margin-left: 30rpx;  
27.   margin-right: 30rpx;  
28. }  
29.   
30. .sound-style{  
31.   position: absolute;  
32.   width: 74rpx;  
33.   height:150rpx;  
34.   margin-top: 45rpx;  
35.   margin-left: 83rpx;  
36. }  
37.   
38.   
39. .board {  
40.   overflow: hidden;  
41.   border-bottom: 2rpx solid #26A5FF;    
42. }  
43. /*列布局*/  
44. .cell{  
45.     display: flex;  
46.     margin: 20rpx;  
47. }  
48. .cell-hd{  
49.     margin-left: 10rpx;  
50.     color: #885A38;  
51. }  
52. .cell .cell-bd{  
53.     flex:1;  
54.     position: relative;  
55.      
56. }  
57. /**只显示一行*/  
58. .date{  
59.     font-size: 30rpx;  
60.     text-overflow: ellipsis;   
61.     white-space:nowrap;  
62.     overflow:hidden;   
63. }  

3.index.js

[javascript] view plain copy

 

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.音频播放不能同时播放多个音频.看文档.微信小程序 播放音频文档