vue中实现录音下载
Vue 中实现录音下载的方法
在 Vue 中实现录音下载功能，可以通过 Web API 中的 MediaRecorder 结合 Blob 对象实现。以下是具体实现步骤：
引入必要的依赖
确保项目已引入 vue 和 vue-audio-recorder（可选，用于简化录音逻辑）。若使用原生 API，无需额外安装库。
npm install vue-audio-recorder创建录音组件
在 Vue 组件中初始化录音功能：
<template>
<div>
<button @click="startRecording">开始录音</button>
<button @click="stopRecording" :disabled="!isRecording">停止录音</button>
<button @click="downloadRecording" :disabled="!audioBlob">下载录音</button>
</div>
</template>
<script>
export default {
data() {
return {
isRecording: false,
mediaRecorder: null,
audioBlob: null,
audioChunks: [],
};
},
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 = () => {
this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
this.audioChunks = [];
};
this.mediaRecorder.start();
this.isRecording = true;
} catch (error) {
console.error('录音权限被拒绝或设备不支持:', error);
}
},
stopRecording() {
if (this.mediaRecorder) {
this.mediaRecorder.stop();
this.isRecording = false;
}
},
downloadRecording() {
if (this.audioBlob) {
const audioUrl = URL.createObjectURL(this.audioBlob);
const a = document.createElement('a');
a.href = audioUrl;
a.download = 'recording.wav';
a.click();
URL.revokeObjectURL(audioUrl);
}
},
},
};
</script>关键点说明
- 权限请求：
getUserMedia需要用户授权麦克风权限。 - 数据存储：通过
ondataavailable事件收集音频片段（audioChunks）。 - 生成 Blob：录音停止时，将片段合并为
Blob对象，格式通常为audio/wav或audio/mp3。 - 下载逻辑：通过创建临时 URL 和
<a>标签触发下载。
可选优化
- 格式转换：使用
lamejs等库将音频转为 MP3 格式。 - UI 反馈：添加录音时长显示或波形可视化（如
wavesurfer.js）。 - 错误处理：捕获设备兼容性问题（如 Safari 的差异）。
兼容性提示
MediaRecorder在 Chrome、Firefox 和 Edge 中支持良好，但在 Safari 中可能需要 polyfill。- 移动端需测试不同浏览器的权限行为。
