vue实现录音播放
Vue 实现录音播放
录音功能实现
使用 navigator.mediaDevices.getUserMedia 获取麦克风权限并录制音频。创建一个 Vue 组件，初始化录音功能：
<template>
<div>
<button @click="startRecording">开始录音</button>
<button @click="stopRecording" :disabled="!isRecording">停止录音</button>
<audio ref="audioPlayer" controls v-if="audioUrl"></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.$refs.audioPlayer.src = this.audioUrl;
this.audioChunks = [];
};
this.mediaRecorder.start();
this.isRecording = true;
} catch (error) {
console.error('录音权限获取失败:', error);
}
},
stopRecording() {
this.mediaRecorder.stop();
this.isRecording = false;
}
}
};
</script>播放录音功能
通过 <audio> 标签的 src 属性绑定录音生成的 URL。使用 ref 获取 DOM 元素并控制播放：
playRecording() {
this.$refs.audioPlayer.play();
}保存录音文件
将录音数据转换为 Blob 并下载：
downloadRecording() {
const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
const url = URL.createObjectURL(audioBlob);
const a = document.createElement('a');
a.href = url;
a.download = 'recording.wav';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}注意事项
- 确保在 HTTPS 环境或 localhost 下使用
getUserMedia，否则可能因浏览器安全策略失败。 - 录音结束后及时释放资源：
stream.getTracks().forEach(track => track.stop())。 - 兼容性处理：部分旧浏览器需使用
navigator.getUserMedia而非navigator.mediaDevices.getUserMedia。
扩展功能
- 添加录音时长显示：通过
setInterval记录开始/结束时间差。 - 可视化音频波形：使用 Web Audio API 的
AnalyserNode分析音频数据并绘制 Canvas。 - 多段录音管理：用数组存储多个录音 URL，实现列表播放。
