当前位置：首页 > VUE

vue项目实现录音

2026-02-17 19:16:27VUE

Vue 项目中实现录音功能

在 Vue 项目中实现录音功能可以通过浏览器的 Web Audio API 和 MediaRecorder API 完成。以下是具体实现方法：

检查浏览器兼容性

确保浏览器支持相关 API：

if (!navigator.mediaDevices || !window.MediaRecorder) {
  console.error('录音功能不支持当前浏览器');
}

获取用户麦克风权限

通过 navigator.mediaDevices.getUserMedia 请求麦克风访问权限：

vue项目实现录音

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    // 后续录音处理
  } catch (err) {
    console.error('无法访问麦克风:', err);
  }
}

创建录音器实例

使用获取的音频流初始化 MediaRecorder：

let mediaRecorder;
let audioChunks = [];

function setupRecorder(stream) {
  mediaRecorder = new MediaRecorder(stream);

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

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

控制录音过程

提供开始/停止录音的按钮控制：

vue项目实现录音

function startRecording() {
  audioChunks = [];
  mediaRecorder.start();
}

function stopRecording() {
  mediaRecorder.stop();
  // 关闭音频流
  mediaRecorder.stream.getTracks().forEach(track => track.stop());
}

播放录音内容

将录音结果转换为可播放的 URL：

const audioUrl = URL.createObjectURL(audioBlob);
const audio = new Audio(audioUrl);
audio.play();

保存录音文件

提供下载录音文件的功能：

function downloadAudio(audioBlob) {
  const url = URL.createObjectURL(audioBlob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'recording.wav';
  a.click();
  URL.revokeObjectURL(url);
}

在 Vue 组件中的实现示例

<template>
  <div>
    <button @click="start" :disabled="isRecording">开始录音</button>
    <button @click="stop" :disabled="!isRecording">停止录音</button>
    <button @click="play" :disabled="!recordedAudio">播放</button>
    <button @click="download" :disabled="!recordedAudio">下载</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
      recordedAudio: null,
      mediaRecorder: null,
      audioChunks: []
    };
  },
  methods: {
    async start() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        this.mediaRecorder = new MediaRecorder(stream);
        this.audioChunks = [];

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

        this.mediaRecorder.start();
        this.isRecording = true;
      } catch (err) {
        console.error(err);
      }
    },

    stop() {
      this.mediaRecorder.stop();
      this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
      this.isRecording = false;

      this.mediaRecorder.onstop = () => {
        this.recordedAudio = new Blob(this.audioChunks, { type: 'audio/wav' });
      };
    },

    play() {
      const audioUrl = URL.createObjectURL(this.recordedAudio);
      new Audio(audioUrl).play();
    },

    download() {
      const url = URL.createObjectURL(this.recordedAudio);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'recording.wav';
      a.click();
      URL.revokeObjectURL(url);
    }
  }
};
</script>