当前位置：首页 > VUE

vue.js实现录音

2026-01-21 04:24:40VUE

实现录音功能的基本步骤

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

使用Web Audio API

浏览器原生提供的MediaRecorder API可以直接录制音频：

// 在Vue组件中
data() {
  return {
    mediaRecorder: null,
    audioChunks: [],
    audioBlob: null
  }
},
methods: {
  async startRecording() {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    this.mediaRecorder = new MediaRecorder(stream);
    this.mediaRecorder.ondataavailable = event => {
      this.audioChunks.push(event.data);
    };
    this.mediaRecorder.start();
  },

  stopRecording() {
    return new Promise(resolve => {
      this.mediaRecorder.onstop = () => {
        this.audioBlob = new Blob(this.audioChunks);
        this.audioChunks = [];
        resolve(this.audioBlob);
      };
      this.mediaRecorder.stop();
    });
  }
}

使用第三方库

更简单的方法是使用专门处理音频的库，如recordrtc或vue-audio-recorder：

vue.js实现录音

安装recordrtc：

npm install recordrtc

在Vue组件中使用：

vue.js实现录音

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() {
      return new Promise(resolve => {
        this.recorder.stopRecording(() => {
          this.audioURL = this.recorder.toURL();
          resolve(this.recorder.getBlob());
        });
      });
    }
  }
}

录音权限处理

需要处理用户拒绝麦克风权限的情况：

async checkPermission() {
  try {
    await navigator.mediaDevices.getUserMedia({ audio: true });
    return true;
  } catch (e) {
    console.error('麦克风权限被拒绝', e);
    return false;
  }
}

音频可视化

可以使用Web Audio API实现录音时的波形可视化：

setupVisualizer() {
  const audioContext = new AudioContext();
  const analyser = audioContext.createAnalyser();
  const dataArray = new Uint8Array(analyser.frequencyBinCount);

  // 连接音频源到分析器
  const source = audioContext.createMediaStreamSource(stream);
  source.connect(analyser);

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