uniapp 小程序 录音功能

1. <template> 
2.     <view class="sound-recording"> 
3.         <view class="time">{{status==0?'录音时长':(status==3?'录音已完成':'正在录音中')}}：{{time}} 秒</view> 
4.         <view class="btn"> 
5.             <view :class="status==3?'show':'hide'" @tap="reset" hover-class="jump-hover">重新录制</view> 
6.             <view :class="status==3 && playStatus==0?'show':'hide'" @tap="bofang" hover-class="jump-hover">{{playStatus==1?'录音播放中':'播放录音'}}</view> 
7.         </view> 
8.         <view class="progress"> 
9.             <text class="txt">最大录音时长（{{duration/1000}}秒 = {{duration/60000}}分钟）</text> 
10.             <progress :percent="time*(100/(duration/1000))" border-radius="10" color="green" stroke-width="10" backgroundColor="#fff" /> 
11.         </view> 
12.         <view class="anniu"> 
13.             <view :class="status==0?'row':'no-clicking'" @click="kaishi" hover-class="jump-hover">开始</view> 
14.             <view :class="status==1?'row':'no-clicking'" @click="zanting" hover-class="jump-hover">暂停</view> 
15.             <view :class="status==2?'row':'no-clicking'" @tap="jixu" hover-class="jump-hover">继续</view> 
16.             <view :class="status==1 || status==2?'row':'no-clicking'" @tap="tingzhi" hover-class="jump-hover">停止</view> 
17.         </view> 
18.     </view> 
19. </template> 
20.  
21. <script> 
22.     const recorderManager = uni.getRecorderManager() 
23.     const innerAudioContext = uni.createInnerAudioContext() 
24.     var init 
25.     export default { 
26.         data() { 
27.             return { 
28.                 time: 0, //录音时长 
29.                 duration: 600000, //录音最大值ms 600000/10分钟 
30.                 tempFilePath: "", //音频路径 
31.                 status: 0, //录音状态 0:未开始录音 1:正在录音 2:暂停录音 3:已完成录音 
32.                 playStatus: 0, //录音播放状态 0:未播放 1:正在播放 
33.             } 
34.         }, 
35.         methods: { 
36.             kaishi: function() { 
37.                 clearInterval(init) //清除定时器 
38.                 //监听录音自动结束事件(如果不加，录音时间到最大值自动结束后，没获取到录音路径将无法正常进行播放) 
39.                 recorderManager.onStop((res) => { 
40.                     console.log('recorder stop', res) 
41.                     this.tempFilePath = res.tempFilePath 
42.                     this.status = 3 
43.                     this.recordingTimer(this.time) 
44.                 }) 
45.  
46.                 const options = { 
47.                     duration: this.duration, //指定录音的时长，单位 ms 
48.                     sampleRate: 16000, //采样率 
49.                     numberOfChannels: 1, //录音通道数 
50.                     encodeBitRate: 96000, //编码码率 
51.                     format: 'mp3', //音频格式，有效值 aac/mp3 
52.                     frameSize: 10, //指定帧大小，单位 KB 
53.                 } 
54.                 this.recordingTimer() 
55.                 recorderManager.start(options) 
56.                 // 监听音频开始事件 
57.                 recorderManager.onStart((res) => { 
58.                     console.log('recorder start') 
59.                     this.status = 1 
60.                 }) 
61.                 console.log(this.status); 
62.             }, 
63.  
64.             /** 
65.              * 暂停录音 
66.              */ 
67.             zanting: function() { 
68.                 console.log('zanting'); 
69.                 recorderManager.onPause(() => { 
70.                     console.log('recorder pause') 
71.                     this.status = 2 
72.                 }) 
73.                 this.recordingTimer(this.time) 
74.                 recorderManager.pause() 
75.             }, 
76.  
77.             /** 
78.              * 继续录音 
79.              */ 
80.             jixu: function() { 
81.                 this.status = 1 
82.                 this.recordingTimer() 
83.                 recorderManager.resume() 
84.             }, 
85.  
86.             /** 
87.              * 停止录音 
88.              */ 
89.             tingzhi: function() { 
90.                 recorderManager.onStop((res) => { 
91.                     console.log('recorder stop', res) 
92.                     this.tempFilePath = res.tempFilePath 
93.                     this.status = 3 
94.                 }) 
95.                 this.recordingTimer(this.time) 
96.                 recorderManager.stop() 
97.  
98.             }, 
99.  
100.             /** 
101.              * 播放录音 
102.              */ 
103.             bofang: function() { 
104.                 //音频地址 
105.                 console.log(this.tempFilePath); 
106.                 innerAudioContext.src = this.tempFilePath 
107.                 //在ios下静音时播放没有声音，默认为true，改为false就好了。 
108.                 // innerAudioContext.obeyMuteSwitch = false 
109.  
110.                 //点击播放 
111.                 if (this.playStatus == 0) { 
112.                     this.playStatus = 1 
113.                     innerAudioContext.play() 
114.                 } 
115.                 // //播放结束 
116.                 innerAudioContext.onEnded(() => { 
117.                     innerAudioContext.stop() 
118.                     this.playStatus = 0 
119.                 }) 
120.             }, 
121.             recordingTimer: function(time) { 
122.                 var that = this 
123.                 if (time == undefined) { 
124.                     //将计时器赋值给init 
125.                     init = setInterval(function() { 
126.                         var time = that.time + 1; 
127.                         that.time = time 
128.                     }, 1000); 
129.                 } else { 
130.                     clearInterval(init) 
131.                     console.log("暂停计时") 
132.                 } 
133.             }, 
134.  
135.             /** 
136.              * 重新录制 
137.              */ 
138.             reset: function() { 
139.                 var that = this 
140.                 wx.showModal({ 
141.                     title: "重新录音", 
142.                     content: "是否重新录制?", 
143.                     success(res) { 
144.                         if (res.confirm) { 
145.                             that.time = 0 
146.                             that.tempFilePath = '' 
147.                             that.status = 0 
148.                             that.playStatus = 0 
149.                             innerAudioContext.stop() 
150.                         } 
151.                     } 
152.                 }) 
153.             } 
154.         } 
155.     } 
156. </script> 
157.  
158. <style> 
159.     .sound-recording { 
160.         background-color: rgb(234, 234, 234); 
161.         margin: 10rpx 30rpx; 
162.         border-radius: 20rpx; 
163.         padding: 5rpx 0rpx; 
164.     } 
165.  
166.     .btn { 
167.         margin: 0rpx 100rpx; 
168.         display: flex; 
169.         justify-content: space-between; 
170.         align-items: center; 
171.     } 
172.  
173.     .btn .show { 
174.         padding: 10rpx; 
175.         width: 200rpx; 
176.         font-size: 25rpx; 
177.         display: flex; 
178.         justify-content: center; 
179.         align-items: center; 
180.         background-color: rgb(178, 228, 228); 
181.         border-radius: 20rpx; 
182.         border: 5rpx solid rgb(127, 204, 214); 
183.     } 
184.  
185.     .btn .hide { 
186.         padding: 10rpx; 
187.         width: 200rpx; 
188.         font-size: 25rpx; 
189.         display: flex; 
190.         justify-content: center; 
191.         align-items: center; 
192.         border-radius: 20rpx; 
193.         border: 5rpx solid #eee; 
194.         pointer-events: none; 
195.         background-color: rgba(167, 162, 162, 0.445); 
196.     } 
197.  
198.     .time { 
199.         line-height: 70rpx; 
200.         text-align: center; 
201.         font-size: 30rpx; 
202.     } 
203.  
204.     .progress { 
205.         margin: 20rpx; 
206.     } 
207.  
208.     .play { 
209.         margin: 0rpx 20rpx; 
210.     } 
211.  
212.     .txt { 
213.         display: flex; 
214.         justify-content: center; 
215.         line-height: 60rpx; 
216.         font-size: 25rpx; 
217.     } 
218.  
219.     .anniu { 
220.         margin: 10rpx 50rpx; 
221.         display: flex; 
222.         justify-content: space-between; 
223.     } 
224.  
225.     .row { 
226.         display: flex; 
227.         justify-content: center; 
228.         align-items: center; 
229.         border-radius: 50%; 
230.         font-size: 25rpx; 
231.         width: 80rpx; 
232.         height: 80rpx; 
233.         background-color: rgb(178, 228, 228); 
234.         border: 5rpx solid rgb(127, 204, 214); 
235.     } 
236.  
237.     .jump-hover { 
238.         transform: scale(0.9); 
239.     } 
240.  
241.     /*禁止点击*/ 
242.  
243.     .anniu .no-clicking { 
244.         pointer-events: none; 
245.         background-color: rgba(167, 162, 162, 0.445); 
246.         display: flex; 
247.         justify-content: center; 
248.         align-items: center; 
249.         border-radius: 50%; 
250.         font-size: 25rpx; 
251.         width: 80rpx; 
252.         height: 80rpx; 
253.         border: 5rpx solid rgb(241, 244, 245); 
254.     } 
255. </style>