vue 实现录音功能
使用 Vue 实现录音功能
安装依赖
需要安装 recordrtc 或 mic-recorder-to-mp3 等录音库。以 mic-recorder-to-mp3 为例：
npm install mic-recorder-to-mp3初始化录音组件
在 Vue 组件中引入录音库并初始化：
import MicRecorder from 'mic-recorder-to-mp3';
export default {
data() {
return {
isRecording: false,
recorder: null,
audioFile: null,
};
},
created() {
this.recorder = new MicRecorder({
bitRate: 128,
});
},
};开始录音
调用库的 start 方法开始录音：
methods: {
startRecording() {
this.recorder
.start()
.then(() => {
this.isRecording = true;
})
.catch((e) => {
console.error(e);
});
},
}停止录音
调用 stop 方法停止录音并获取音频文件：
methods: {
stopRecording() {
this.recorder
.stop()
.getMp3()
.then(([buffer, blob]) => {
this.isRecording = false;
this.audioFile = new File(buffer, 'recording.mp3', {
type: blob.type,
lastModified: Date.now(),
});
})
.catch((e) => {
console.error(e);
});
},
}播放录音
通过 URL.createObjectURL 生成音频链接并播放：
methods: {
playRecording() {
if (!this.audioFile) return;
const audio = new Audio(URL.createObjectURL(this.audioFile));
audio.play();
},
}清理资源
在组件销毁时释放音频资源：
beforeDestroy() {
if (this.audioFile) {
URL.revokeObjectURL(this.audioFile);
}
}使用原生 Web API 实现
如果不想依赖第三方库，可以使用浏览器的 MediaRecorder API：
请求麦克风权限
通过 navigator.mediaDevices.getUserMedia 获取麦克风访问权限：
async startRecording() {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
this.mediaRecorder = new MediaRecorder(stream);
this.audioChunks = [];
this.mediaRecorder.ondataavailable = (e) => {
this.audioChunks.push(e.data);
};
this.mediaRecorder.onstop = () => {
const audioBlob = new Blob(this.audioChunks);
this.audioFile = URL.createObjectURL(audioBlob);
};
this.mediaRecorder.start();
this.isRecording = true;
}停止录音
调用 stop 方法并关闭流：
stopRecording() {
this.mediaRecorder.stop();
this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
this.isRecording = false;
}注意事项
- 浏览器兼容性：
MediaRecorder在 Safari 和部分移动端浏览器可能不支持。 - HTTPS 环境：
getUserMedia要求页面运行在 HTTPS 或localhost下。 - 用户授权：需处理用户拒绝麦克风权限的情况。
