微信小程序-录音机，RECORD组件真机可用

经过测试，本demo真机可正常使用录音，并播放录音的功能，推荐新手学习

作者：Cedric-song

1. // page/recorder/index.js
   
2. var util = require('../../util/util.js')
   
3. const PLAY = "播放音频"
   
4. const REPEAT = "重播音频"
   
5. const PAUSE = "暂停播放"
   
6. 
   
7. const PLAY_RECORD = "开始录音"
   
8. const STOP_RECORD = "停止录音"
   
9. const PLAY_VOICE = "回放录音"
   
10. const STOP_VOICE = "停止回放"
    
11. const SAVE_VOICE = "保存录音"
    
12. 
    
13. var playTimeInterval
    
14. var recordTimeInterval
    
15. 
    
16. Page({
    
17.   onReady: function(e) {
    
18.     // 使用 wx.createAudioContext 获取 audio 上下文 context
    
19.     this.audioCtx = wx.createAudioContext('myAudio')
    
20.   },
    
21.   data: {
    
22.     recording: false,
    
23.     playing: false,
    
24.     hasRecord: false,
    
25.     recordTime: 0,
    
26.     playTime: 0,
    
27.     formatedRecordTime: '00:00:00',
    
28.     formatedPlayTime: '00:00:00',
    
29.     play: PLAY,
    
30.     repeat: REPEAT,
    
31.     record: PLAY_RECORD,
    
32.     playRecord: PLAY_VOICE,
    
33.     stopRecord: STOP_RECORD,
    
34.     playVoice: PLAY_VOICE,
    
35.     stopVoice: STOP_VOICE,
    
36.     saveVoice: SAVE_VOICE,
    
37.     audioInfo: {
    
38.       poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    
39.       name: '此时此刻',
    
40.       author: '许巍',
    
41.       controls: false,
    
42.       src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
    
43.     },
    
44. 
    
45.   },
    
46.   audioPause: function() {
    
47.     this.audioCtx.pause()
    
48.   },
    
49.   audioToggle: function(btnName, defaultName) {
    
50.     let otherBtnName = btnName === "play" ? "repeat" : "play"
    
51.     if (this.data[btnName] === defaultName) {
    
52.       this.audioCtx.play()
    
53.       this.setData({
    
54.         [btnName]: PAUSE,
    
55.         [otherBtnName]: otherBtnName.toUpperCase() === "PLAY" ? PLAY : REPEAT
    
56.       });
    
57.       return false
    
58.     }
    
59.     this.setData({
    
60.       [btnName]: defaultName
    
61.     });
    
62.     this.audioPause()
    
63.   },
    
64.   audioPlay: function() {
    
65.     this.audioToggle('play', PLAY)
    
66.   },
    
67.   audioRepeat: function() {
    
68.     this.audioCtx.seek(0)
    
69.     this.audioToggle('repeat', REPEAT)
    
70.   },
    
71.   defaultPause: function() {
    
72.     this.setData({
    
73.       play: PLAY,
    
74.       repeat: REPEAT
    
75.     })
    
76.   },
    
77.   onHide: function() {
    
78.     if (this.data.playing) {
    
79.       this.stopVoice()
    
80.     } else if (this.data.recording) {
    
81.       this.stopRecordUnexpectedly()
    
82.     }
    
83.   },
    
84.   startRecord: function() {
    
85.     this.setData({
    
86.       recording: true
    
87.     })
    
88. 
    
89.     var that = this
    
90.     recordTimeInterval = setInterval(function() {
    
91.       var recordTime = that.data.recordTime += 1
    
92.       that.setData({
    
93.         formatedRecordTime: util.formatTime(that.data.recordTime),
    
94.         recordTime: recordTime
    
95.       })
    
96.     }, 1000)
    
97.     wx.startRecord({
    
98.       success: function(res) {
    
99.         that.setData({
    
100.           hasRecord: true,
     
101.           tempFilePath: res.tempFilePath,
     
102.           formatedPlayTime: util.formatTime(that.data.playTime)
     
103.         })
     
104.       },
     
105.       complete: function() {
     
106.         that.setData({
     
107.           recording: false
     
108.         })
     
109.         clearInterval(recordTimeInterval)
     
110.       }
     
111.     })
     
112.   },
     
113.   stopRecord: function() {
     
114.     wx.stopRecord()
     
115.   },
     
116.   stopRecordUnexpectedly: function() {
     
117.     var that = this
     
118.     wx.stopRecord({
     
119.       success: function() {
     
120.         console.log('stop record success')
     
121.         clearInterval(recordTimeInterval)
     
122.         that.setData({
     
123.           recording: false,
     
124.           hasRecord: false,
     
125.           recordTime: 0,
     
126.           formatedRecordTime: util.formatTime(0)
     
127.         })
     
128.       }
     
129.     })
     
130.   },
     
131.   playVoice: function() {
     
132.     var that = this
     
133.     playTimeInterval = setInterval(function() {
     
134.       var playTime = that.data.playTime + 1
     
135.       console.log('update playTime', playTime)
     
136.       that.setData({
     
137.         playing: true,
     
138.         formatedPlayTime: util.formatTime(playTime),
     
139.         playTime: playTime
     
140.       })
     
141.     }, 1000)
     
142.     wx.playVoice({
     
143.       filePath: this.data.tempFilePath,
     
144.       success: function() {
     
145.         clearInterval(playTimeInterval)
     
146.         var playTime = 0
     
147.         console.log('play voice finished')
     
148.         that.setData({
     
149.           playing: false,
     
150.           formatedPlayTime: util.formatTime(playTime),
     
151.           playTime: playTime
     
152.         })
     
153.       }
     
154.     })
     
155.   },
     
156.   pauseVoice: function() {
     
157.     clearInterval(playTimeInterval)
     
158.     wx.pauseVoice()
     
159.     this.setData({
     
160.       playing: false
     
161.     })
     
162.   },
     
163.   stopVoice: function() {
     
164.     clearInterval(playTimeInterval)
     
165.     this.setData({
     
166.       playing: false,
     
167.       formatedPlayTime: util.formatTime(0),
     
168.       playTime: 0
     
169.     })
     
170.     wx.stopVoice()
     
171.   },
     
172.   saveVoice: function() {
     
173.     wx.saveFile({
     
174.       success: function(res) {
     
175.         var tempFilePath = res.tempFilePath
     
176.         wx.saveFile({
     
177.           tempFilePath: tempFilePath,
     
178.           success: function(res) {
     
179.             var savedFilePath = res.savedFilePath
     
180.           }
     
181.         })
     
182.       }
     
183.     })
     
184.   },
     
185.   clear: function() {
     
186.     clearInterval(playTimeInterval)
     
187.     wx.stopVoice()
     
188.     this.setData({
     
189.       playing: false,
     
190.       hasRecord: false,
     
191.       tempFilePath: '',
     
192.       formatedRecordTime: util.formatTime(0),
     
193.       recordTime: 0,
     
194.       playTime: 0
     
195.     })
     
196.   }
     
197. })

复制代码

项目地址：

游客，如果您要查看本帖隐藏内容请回复