vue.js实现录音
Vue.js 实现录音功能
在Vue.js中实现录音功能可以通过浏览器提供的MediaRecorder API完成。以下是一个完整的实现方案：
安装依赖（可选）
如果需要更高级的音频处理，可以安装recordrtc库：
npm install recordrtc基础实现代码
创建一个Vue组件（如AudioRecorder.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>
<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.audioChunks = [];
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);
stream.getTracks().forEach(track => track.stop());
};
this.mediaRecorder.start();
this.isRecording = true;
} catch (error) {
console.error('录音错误:', error);
}
},
stopRecording() {
this.mediaRecorder.stop();
this.isRecording = false;
}
}
}
</script>使用RecordRTC增强版
如需更多功能（如录音时长限制、格式选择等）：
import RecordRTC from 'recordrtc';
methods: {
async startRecording() {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
this.recorder = new RecordRTC(stream, {
type: 'audio',
mimeType: 'audio/wav',
recorderType: RecordRTC.StereoAudioRecorder
});
this.recorder.startRecording();
this.isRecording = true;
},
stopRecording() {
this.recorder.stopRecording(() => {
this.audioUrl = URL.createObjectURL(this.recorder.getBlob());
this.isRecording = false;
});
}
}注意事项
- 需要在HTTPS环境或localhost下使用
- 首次使用需要用户授权麦克风权限
- 不同浏览器支持的音频格式可能不同
- 移动端可能有额外的兼容性问题
保存录音文件
添加保存功能的方法：
saveRecording() {
const link = document.createElement('a');
link.href = this.audioUrl;
link.download = 'recording.wav';
link.click();
}这个实现提供了基础的录音功能，可以根据需求扩展更多特性如可视化、音频编辑等。
