微信小程序写一个录音机

微信小程序写一个录音机

代码：
wxml:

<view class="container">
  <view class="duration">{{duration}}</view>
  <button bindtap="startRecord" class="btn">开始录音</button>
  <button bindtap="stopRecord" class="btn">停止录音</button>
  <button bindtap="playRecord" class="btn">播放录音</button>
</view>
<audio id="audio" src="{{recordPath}}" controls></audio>

wxss:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 84vh;
}

.btn {
  margin: 10px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
}

.duration {
  margin-top: -50px;
  font-size: 24px;
}

js：

let timer = null;
Page({
data: {
isRecording: false,
recordPath: '',
duration: '00:00'
},
startRecord: function() {
const recorderManager = wx.getRecorderManager();
this.setData({
isRecording: true,
duration: '00:00'
});
let startTime = new Date().getTime();
timer = setInterval(() => {
let currentTime = new Date().getTime();
let diff = currentTime - startTime;
let m = Math.floor(diff / 60000 % 60);
let s = Math.floor(diff / 1000 % 60);
this.setData({
duration: `${this.formatTime(m)}:${this.formatTime(s)}`
});
}, 1000);
recorderManager.start({
format: 'mp3'
});
recorderManager.onStart(() => {
console.log('recorder start');
});
recorderManager.onStop((res) => {
console.log('recorder stop', res);
this.setData({
recordPath: res.tempFilePath,
isRecording: false
});
});
},
stopRecord: function() {
const recorderManager = wx.getRecorderManager();
clearInterval(timer);
recorderManager.stop();
},
playRecord: function() {
this.setData({
// isRecording: true,
duration: '录音播放'
});
const audioCtx = wx.createInnerAudioContext();
audioCtx.src = this.data.recordPath;
audioCtx.play();
},
formatTime: function(time) {
return time < 10 ? `0${time}` : time;
}
});

json:

{
"usingComponents": {},
"navigationBarTitleText": "录音机"
}

以上就是实现一个录音机的小程序！