vue实现PC端录音功能的实例代码

Vue实现PC端录音功能的实例代码需要通过JS录音库来实现，常用的开源录音库有Recorder.js和RecordRTC，这两个库都可以用于Vue项目的录音。

下面是实现步骤及示例代码：

步骤一：安装录音库

使用npm安装Recorder.js或RecordRTC

npm install recorderjs
npm install recordrtc 

步骤二：引入录音库

在需要使用录音功能的Vue组件中，引入录音库：

import Recorder from 'recorderjs';
import RecordRTC from 'recordrtc';

步骤三：初始化录音设置

在组件的created生命周期中初始化录音设置：

created() {
  navigator.mediaDevices.getUserMedia({ audio: true }).then((mediaStream) => {
    this.mediaStream = mediaStream;
    this.audioContext = new AudioContext();
    this.audioSource = this.audioContext.createMediaStreamSource(mediaStream);
    this.recorder = new Recorder(this.audioSource);
  }).catch(err => console.error(err));
}

步骤四：录音操作

在Vue组件中可以添加录音操作的方法，例如开始录音、结束录音和发送录音等。

methods: {
  startRecording() {
    this.recorder && this.recorder.record();
  },
  stopRecording() {
    this.recorder && this.recorder.stop();
    this.mediaStream && this.mediaStream.getTracks().forEach(track => track.stop());
    this.audioSource && this.audioSource.disconnect();
    this.recorder.exportWAV((blob) => {
      this.audioUrl = window.URL.createObjectURL(blob);
    });
  },
  sendRecording() {
    // 将录音文件发送到后台或其他应用
  }
}

示例一：使用Recorder.js录音

<template>
  <div>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording">结束录音</button>
    <button @click="sendRecording">发送录音</button>
    <audio :src="audioUrl" controls></audio>
  </div>
</template>

<script>
import Recorder from 'recorderjs';

export default {
  data() {
    return {
      mediaStream: null,
      audioContext: null,
      audioSource: null,
      recorder: null,
      audioUrl: null
    };
  },
  created() {
    navigator.mediaDevices.getUserMedia({ audio: true }).then((mediaStream) => {
      this.mediaStream = mediaStream;
      this.audioContext = new AudioContext();
      this.audioSource = this.audioContext.createMediaStreamSource(mediaStream);
      this.recorder = new Recorder(this.audioSource);
    }).catch(err => console.error(err));
  },
  methods: {
    startRecording() {
      this.recorder && this.recorder.record();
    },
    stopRecording() {
      this.recorder && this.recorder.stop();
      this.mediaStream && this.mediaStream.getTracks().forEach(track => track.stop());
      this.audioSource && this.audioSource.disconnect();
      this.recorder.exportWAV((blob) => {
        this.audioUrl = window.URL.createObjectURL(blob);
      });
    },
    sendRecording() {
      // 将录音文件发送到后台或其他应用
    }
  }
};
</script>

示例二：使用RecordRTC录音

<template>
  <div>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording">结束录音</button>
    <button @click="sendRecording">发送录音</button>
    <audio :src="audioUrl" controls></audio>
  </div>
</template>

<script>
import RecordRTC from 'recordrtc';

export default {
  data() {
    return {
      mediaStream: null,
      recorder: null,
      audioUrl: null
    };
  },
  created() {
    navigator.mediaDevices.getUserMedia({ audio: true }).then((mediaStream) => {
      this.mediaStream = mediaStream;
    }).catch(err => console.error(err));
  },
  methods: {
    startRecording() {
      this.recorder = RecordRTC(this.mediaStream, {
        type: 'audio',
        mimeType: 'audio/webm'
      });
      this.recorder.startRecording();
    },
    stopRecording() {
      this.recorder && this.recorder.stopRecording(() => {
        this.recorder.getDataURL((audioUrl) => {
          this.audioUrl = audioUrl;
        });
        this.mediaStream && this.mediaStream.getTracks().forEach(track => track.stop());
      });
    },
    sendRecording() {
      // 将录音文件发送到后台或其他应用
    }
  }
};
</script>