vue实现录音功能
使用 Vue 实现录音功能
浏览器兼容性检查
确保浏览器支持 MediaDevices.getUserMedia API。现代浏览器如 Chrome、Firefox、Edge 和 Safari 均支持该功能。可以通过以下代码检查兼容性：
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
console.error('录音功能不支持当前浏览器');
}获取用户麦克风权限
调用 getUserMedia 请求用户麦克风权限。配置参数中 audio: true 表示仅请求音频权限。
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
// 处理音频流
})
.catch(err => {
console.error('无法访问麦克风:', err);
});初始化录音上下文
使用 AudioContext 和 MediaStreamAudioSourceNode 创建音频处理上下文。需要先暂停上下文以避免自动播放策略限制。
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
audioContext.suspend(); // 初始状态暂停
const sourceNode = audioContext.createMediaStreamSource(stream);配置录音处理器
通过 ScriptProcessorNode 或 AudioWorklet 处理音频数据。以下示例使用较兼容的 ScriptProcessorNode：
const processor = audioContext.createScriptProcessor(4096, 1, 1);
sourceNode.connect(processor);
processor.connect(audioContext.destination);
let audioChunks = [];
processor.onaudioprocess = e => {
audioChunks.push(e.inputBuffer.getChannelData(0));
};控制录音状态
通过 audioContext.resume() 和 suspend() 控制录音启停：
// 开始录音
audioContext.resume();
// 停止录音
audioContext.suspend();
processor.disconnect();
sourceNode.disconnect();导出音频文件
使用 MediaRecorder API 可直接生成音频文件（需浏览器支持）：
const mediaRecorder = new MediaRecorder(stream);
let recordedChunks = [];
mediaRecorder.ondataavailable = e => {
if (e.data.size > 0) recordedChunks.push(e.data);
};
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'audio/wav' });
const url = URL.createObjectURL(blob);
// 可通过 <a download> 或上传到服务器
};
// 开始/停止
mediaRecorder.start();
mediaRecorder.stop();Vue 组件集成示例
将逻辑封装为 Vue 组件，使用响应式数据管理状态：
export default {
data() {
return {
isRecording: false,
audioBlob: null
};
},
methods: {
async startRecording() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
this.mediaRecorder = new MediaRecorder(stream);
this.mediaRecorder.start();
this.isRecording = true;
} catch (err) {
console.error(err);
}
},
stopRecording() {
this.mediaRecorder.stop();
this.isRecording = false;
this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
}
}
};注意事项
- iOS 设备需在用户交互事件中触发
getUserMedia，如按钮点击事件 - 部分浏览器要求页面为 HTTPS 环境才允许访问麦克风
- 长时间录音需注意内存管理，可分段保存音频数据
第三方库简化实现
如需快速实现，可考虑以下库：
- vue-audio-recorder: 专为 Vue 设计的录音组件
- recordrtc: 功能全面的录音库，支持多种音频格式
- wavesurfer.js: 带可视化波形的录音解决方案
安装示例：
npm install vue-audio-recorder使用示例：
import VueAudioRecorder from 'vue-audio-recorder';
Vue.use(VueAudioRecorder);
