vue实现语音录音
实现语音录音的基本步骤
在Vue中实现语音录音功能通常需要借助浏览器的MediaRecorder API。以下是一个完整的实现方案：
创建录音组件
新建一个Vue组件（如VoiceRecorder.vue），包含以下模板结构：
<template>
<div>
<button @click="startRecording" :disabled="isRecording">开始录音</button>
<button @click="stopRecording" :disabled="!isRecording">停止录音</button>
<audio v-if="audioUrl" :src="audioUrl" controls></audio>
</div>
</template>设置组件状态
在脚本部分定义必要的状态：
export default {
data() {
return {
isRecording: false,
mediaRecorder: null,
audioChunks: [],
audioUrl: null
}
}
}实现开始录音功能
添加开始录音的方法：
methods: {
async startRecording() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
this.mediaRecorder = new MediaRecorder(stream);
this.mediaRecorder.start();
this.mediaRecorder.ondataavailable = event => {
this.audioChunks.push(event.data);
};
this.isRecording = true;
} catch (error) {
console.error('录音权限被拒绝:', error);
}
}
}实现停止录音功能
添加停止录音的方法：
stopRecording() {
this.mediaRecorder.stop();
this.mediaRecorder.onstop = () => {
const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
this.audioUrl = URL.createObjectURL(audioBlob);
this.audioChunks = [];
this.isRecording = false;
// 释放麦克风资源
this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
};
}添加样式（可选）
根据需要添加基本样式：
<style scoped>
button {
margin: 10px;
padding: 8px 16px;
}
</style>注意事项
- 该功能需要浏览器支持
MediaRecorderAPI，现代浏览器如Chrome、Firefox、Edge等都支持 - 需要用户授予麦克风访问权限
- 录音格式默认为浏览器决定的格式，可通过
mimeType参数指定特定格式 - 在生产环境中应考虑添加错误处理和用户引导
扩展功能
如需保存录音文件，可添加以下方法：
saveRecording() {
const a = document.createElement('a');
a.href = this.audioUrl;
a.download = 'recording.wav';
a.click();
}并相应地在模板中添加保存按钮。
