微信小程序写一个录音机
代码:
wxml:
html
<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:
css
.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:
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:
json
{
"usingComponents": {},
"navigationBarTitleText": "录音机"
}
以上就是实现一个录音机的小程序!