微信小程序写一个录音机

微信小程序写一个录音机

代码：
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": "录音机"
}

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