vue播放录音实现

Vue 中实现录音功能

在 Vue 中实现录音功能通常需要使用浏览器的 MediaRecorder API 或第三方库。以下是两种常见的实现方式：

使用原生 MediaRecorder API

1. 检查浏览器支持 确保浏览器支持 MediaRecorder 和 getUserMedia：

   if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
   console.error('MediaDevices API not supported');
   }

2. 请求麦克风权限 通过 getUserMedia 获取音频流：

   
   async function startRecording() {
   const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
   const mediaRecorder = new MediaRecorder(stream);
   const audioChunks = [];

mediaRecorder.ondataavailable = (event) => { if (event.data.size > 0) audioChunks.push(event.data); };

mediaRecorder.onstop = () => { const audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); const audioUrl = URL.createObjectURL(audioBlob); // 使用 audioUrl 播放或下载 };

mediaRecorder.start(); }

3. 控制录音
```javascript
// 开始录音
mediaRecorder.start();

// 停止录音
mediaRecorder.stop();

// 暂停录音
mediaRecorder.pause();

// 继续录音
mediaRecorder.resume();

使用第三方库（如 RecordRTC）

1. 安装 RecordRTC

   npm install recordrtc

2. 在 Vue 组件中使用

   
   <template>
   <button @click="startRecording">开始录音</button>
   <button @click="stopRecording">停止录音</button>
   <audio v-if="audioUrl" :src="audioUrl" controls></audio>
   </template>

import RecordRTC from 'recordrtc';

export default { data() { return { recorder: null, audioUrl: null }; }, methods: { async startRecording() { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); this.recorder = new RecordRTC(stream, { type: 'audio', mimeType: 'audio/wav' }); this.recorder.startRecording(); }, stopRecording() { this.recorder.stopRecording(() => { const blob = this.recorder.getBlob(); this.audioUrl = URL.createObjectURL(blob); }); } } };

```

注意事项

• 录音功能需要在 HTTPS 或 localhost 环境下工作
• 不同浏览器支持的音频格式可能不同
• 移动端设备可能需要额外的权限处理
• 录音质量可以通过配置参数调整，如采样率、比特率等

以上方法提供了在 Vue 中实现录音功能的基本框架，可以根据具体需求进行扩展和优化。