Page({
|
data: {
|
recordingSrc: '',
|
isRecording: false,
|
},
|
|
onLoad() {
|
this.recorderManager = wx.getRecorderManager();
|
|
this.recorderManager.onStart(() => {
|
console.log('recorder start');
|
this.setData({ isRecording: true });
|
this.startWaveformDrawing();
|
});
|
|
this.recorderManager.onStop((res) => {
|
console.log('recorder stop', res);
|
const { tempFilePath } = res;
|
this.setData({
|
recordingSrc: tempFilePath,
|
isRecording: false
|
});
|
this.stopWaveformDrawing();
|
});
|
|
this.recorderManager.onError((res) => {
|
console.error(res);
|
this.setData({ isRecording: false });
|
this.stopWaveformDrawing();
|
});
|
},
|
|
startRecording() {
|
if (this.data.isRecording) return;
|
|
wx.authorize({
|
scope: 'scope.record',
|
success: () => {
|
const options = {
|
duration: 60000,
|
sampleRate: 44100,
|
numberOfChannels: 1,
|
encodeBitRate: 192000,
|
format: 'aac',
|
frameSize: 50
|
};
|
this.recorderManager.start(options);
|
},
|
fail: () => {
|
wx.showModal({
|
title: '授权失败',
|
content: '请授权录音功能',
|
showCancel: false
|
});
|
}
|
});
|
},
|
|
stopRecording() {
|
if (!this.data.isRecording) return;
|
|
this.recorderManager.stop();
|
},
|
|
startWaveformDrawing() {
|
if (this.waveformInterval) return;
|
|
const canvasContext = wx.createCanvasContext('waveform');
|
const drawWaveform = () => {
|
if (!this.data.isRecording) return;
|
|
// 生成模拟的音量数据
|
const data = new Array(100).fill(0).map(() => Math.random() * 100);
|
|
canvasContext.clearRect(0, 0, 300, 100);
|
canvasContext.beginPath();
|
canvasContext.moveTo(0, 50);
|
for (let i = 0; i < data.length; i++) {
|
const x = (i / data.length) * 300;
|
const y = 50 - data[i] / 2;
|
canvasContext.lineTo(x, y);
|
}
|
canvasContext.lineTo(300, 50);
|
canvasContext.stroke();
|
canvasContext.draw();
|
|
this.waveformInterval = setTimeout(drawWaveform, 100);
|
};
|
|
drawWaveform();
|
},
|
|
stopWaveformDrawing() {
|
clearTimeout(this.waveformInterval);
|
this.waveformInterval = null;
|
}
|
});
|
