柚子快報激活碼778899分享：微信小程序?qū)懸粋€錄音機
柚子快報激活碼778899分享：微信小程序?qū)懸粋€錄音機
微信小程序?qū)懸粋€錄音機
代碼： wxml:
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": "錄音機"
}
以上就是實現(xiàn)一個錄音機的小程序！
柚子快報激活碼778899分享：微信小程序?qū)懸粋€錄音機
推薦文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Farfetch遠方購物
