当前位置：首页 > VUE

vue项目实现录音

2026-03-09 07:49:25VUE

使用浏览器原生API实现录音

在Vue项目中实现录音功能可以通过浏览器的MediaRecorder API完成。以下是一个基本实现方案：

安装必要的依赖（如果需要处理音频波形等）：

npm install recordrtc

创建录音组件：

vue项目实现录音

<template>
  <div>
    <button @click="startRecording">开始录音</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.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.audioChunks = [];
        };
        this.mediaRecorder.start();
        this.isRecording = true;
      } catch (error) {
        console.error('录音权限被拒绝或出错:', error);
      }
    },
    stopRecording() {
      this.mediaRecorder.stop();
      this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
      this.isRecording = false;
    }
  }
}
</script>

使用第三方库简化实现

对于更复杂的录音需求，可以使用RecordRTC库：

<script>
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();
    },
    async stopRecording() {
      return new Promise(resolve => {
        this.recorder.stopRecording(() => {
          const blob = this.recorder.getBlob();
          this.audioUrl = URL.createObjectURL(blob);
          this.recorder.stream.stop();
          resolve(blob);
        });
      });
    }
  }
}
</script>

处理跨浏览器兼容性

不同浏览器对音频格式的支持不同，可以添加格式检测：

vue项目实现录音

function getSupportedMimeType() {
  const types = [
    'audio/webm',
    'audio/ogg',
    'audio/wav',
    'audio/mpeg'
  ];
  return types.find(type => MediaRecorder.isTypeSupported(type)) || 'audio/webm';
}

录音可视化实现

使用Web Audio API实现波形可视化：

async function setupAudioContext(stream) {
  const audioContext = new AudioContext();
  const analyser = audioContext.createAnalyser();
  const source = audioContext.createMediaStreamSource(stream);
  source.connect(analyser);
  analyser.connect(audioContext.destination);

  return analyser;
}

function drawWaveform(analyser, canvasElement) {
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  function draw() {
    requestAnimationFrame(draw);
    analyser.getByteTimeDomainData(dataArray);
    // 使用canvas绘制波形
  }

  draw();
}

服务器上传处理

将录音文件上传到服务器：

async function uploadRecording(blob) {
  const formData = new FormData();
  formData.append('audio', blob, 'recording.wav');

  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });
    return await response.json();
  } catch (error) {
    console.error('上传失败:', error);
  }
}