当前位置：首页 > VUE

vue实现录音

2026-01-13 06:53:32VUE

Vue 实现录音功能

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

使用 Web Audio API

获取用户麦克风权限 通过 navigator.mediaDevices.getUserMedia 请求麦克风访问权限。

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

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

  mediaRecorder.onstop = () => {
    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
    const audioUrl = URL.createObjectURL(audioBlob);
    // 处理录音结果
  };

  mediaRecorder.start();
}

停止录音 调用 mediaRecorder.stop() 方法停止录音。
播放录音 使用 <audio> 元素播放录音：
```
<audio controls :src="audioUrl"></audio>
```

使用第三方库（如 recordrtc）

安装 recordrtc 通过 npm 安装：
```
npm install recordrtc
```

实现录音功能 在 Vue 组件中引入并使用：

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' });
      this.recorder.startRecording();
    },
    stopRecording() {
      this.recorder.stopRecording(() => {
        this.audioUrl = this.recorder.toURL();
      });
    },
  },
};

保存录音 使用 recorder.save() 方法保存录音文件。

注意事项

确保在 HTTPS 环境下测试，否则 getUserMedia 可能无法正常工作。
录音功能在移动设备上可能有额外的权限要求。
考虑添加错误处理，例如用户拒绝麦克风权限时的反馈。

示例组件

以下是一个完整的 Vue 组件示例：

vue实现录音

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

<script>
import RecordRTC from 'recordrtc';

export default {
  data() {
    return {
      isRecording: false,
      recorder: null,
      audioUrl: null,
    };
  },
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        this.recorder = new RecordRTC(stream, { type: 'audio' });
        this.recorder.startRecording();
        this.isRecording = true;
      } catch (error) {
        console.error('无法访问麦克风:', error);
      }
    },
    stopRecording() {
      this.recorder.stopRecording(() => {
        this.audioUrl = this.recorder.toURL();
        this.isRecording = false;
      });
    },
  },
};
</script>

标签: vue