vue 实现录音功能
使用 Vue 实现录音功能
安装依赖
需要安装 recordrtc 或 vue-audio-recorder 等库来简化录音功能的实现。通过 npm 或 yarn 安装：
npm install recordrtc
# 或
npm install vue-audio-recorder基本录音功能实现
通过 HTML5 的 MediaRecorder API 结合 Vue 实现录音功能。以下是一个简单的示例代码：
<template>
<div>
<button @click="startRecording">开始录音</button>
<button @click="stopRecording" :disabled="!isRecording">停止录音</button>
<audio v-if="audioUrl" :src="audioUrl" controls></audio>
</div>
</template>
<script>
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.ondataavailable = (event) => {
this.audioChunks.push(event.data);
};
this.mediaRecorder.onstop = () => {
const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
this.audioUrl = URL.createObjectURL(audioBlob);
this.audioChunks = [];
};
this.mediaRecorder.start();
this.isRecording = true;
} catch (error) {
console.error('录音失败:', error);
}
},
stopRecording() {
this.mediaRecorder.stop();
this.isRecording = false;
},
},
};
</script>使用第三方库简化实现
vue-audio-recorder 提供了更简单的封装，可以直接在 Vue 中使用：
<template>
<div>
<vue-audio-recorder
:recording="recording"
@startRecording="startRecording"
@stopRecording="stopRecording"
/>
<audio v-if="audioUrl" :src="audioUrl" controls></audio>
</div>
</template>
<script>
import VueAudioRecorder from 'vue-audio-recorder';
export default {
components: { VueAudioRecorder },
data() {
return {
recording: false,
audioUrl: null,
};
},
methods: {
startRecording() {
this.recording = true;
},
stopRecording(audioData) {
this.recording = false;
this.audioUrl = audioData.url;
},
},
};
</script>处理兼容性问题
不同浏览器对 MediaRecorder 的支持程度不同，可以通过检查 API 是否存在来确保兼容性：
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
alert('您的浏览器不支持录音功能');
}保存录音文件
可以将录音文件保存到服务器或本地：
methods: {
saveRecording() {
const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
const formData = new FormData();
formData.append('audio', audioBlob, 'recording.wav');
// 上传到服务器
fetch('/api/upload-audio', {
method: 'POST',
body: formData,
}).then(response => {
console.log('录音已保存');
});
},
},注意事项
- 录音功能需要用户授权麦克风权限。
- 部分浏览器可能不支持某些音频格式，建议使用
audio/wav或audio/mp3。 - 录音完成后释放资源，避免内存泄漏：
stopRecording() { this.mediaRecorder.stop(); this.mediaRecorder.stream.getTracks().forEach(track => track.stop()); this.isRecording = false; },
