vue中实现录音下载
Vue 中实现录音下载的方法
使用 Web Audio API 和 MediaRecorder
安装必要的依赖库（如需要）：
npm install recordrtc在 Vue 组件中引入相关库：
import RecordRTC from 'recordrtc';创建录音逻辑：
export default {
data() {
return {
mediaRecorder: null,
audioChunks: [],
audioBlob: null,
audioUrl: ''
};
},
methods: {
async startRecording() {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
this.mediaRecorder = new MediaRecorder(stream);
this.mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
this.audioChunks.push(event.data);
}
};
this.mediaRecorder.onstop = () => {
this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
this.audioUrl = URL.createObjectURL(this.audioBlob);
this.audioChunks = [];
};
this.mediaRecorder.start();
},
stopRecording() {
this.mediaRecorder.stop();
this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
},
downloadRecording() {
const a = document.createElement('a');
a.href = this.audioUrl;
a.download = 'recording.wav';
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(this.audioUrl);
}, 100);
}
}
};使用第三方库简化实现
使用 vue-audio-recorder 插件：
npm install vue-audio-recorder在组件中使用：
import VueAudioRecorder from 'vue-audio-recorder';
export default {
components: {
VueAudioRecorder
},
methods: {
onRecordingComplete(audio) {
const url = URL.createObjectURL(audio.blob);
const a = document.createElement('a');
a.href = url;
a.download = 'recording.mp3';
a.click();
}
}
};注意事项
- 需要 HTTPS 环境或 localhost 才能使用 getUserMedia API
- 不同浏览器支持的音频格式可能不同
- 长时间录音需要考虑内存管理
- 移动端可能需要额外权限处理
样式和模板示例
<template>
<div>
<button @click="startRecording">开始录音</button>
<button @click="stopRecording">停止录音</button>
<button @click="downloadRecording" :disabled="!audioUrl">下载录音</button>
</div>
</template>兼容性处理
对于不支持 MediaRecorder 的浏览器，可以使用 RecordRTC 作为 fallback：
const recorder = new RecordRTC(stream, {
type: 'audio',
mimeType: 'audio/wav'
});
