这里将介绍下微信小程序开发之录音机 音频播放 动画 (真机可用)

上代码:1.index.wxml

2.

1. 4.
5. 存储路径:
6. 存储时间:
7. 音频大小:KB
8. </view>
10. </view>
11. </view>
    15.</block>
12. </view>
13. </scroll-view>
14. 19. 20. 21. 22. 23. 24.<image wx:if=""class="sound-style" src="../../images/voice_icon_speech_sound_5.png" ></image>
15. </view>
17. 按住 录音
18. </view>

2.index.wxss

/index.wxss/
2..speak-style{

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

3.index.js

//index.js
2.//获取应用实例
3.var app = getApp()
4.Page({

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

注意:

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

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

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