vue中recorder如何获取实时录音流

要在Vue中获取实时录音流，可以使用Web Audio API。你需要先创建一个MediaStream对象来捕获麦克风的音频输入。然后，使用MediaRecorder API来记录音频，并将其存储为Blob对象。下面是一个简单的示例代码：

<template>
  <div>
    <button @click="startRecording">Start Recording</button>
    <button @click="stopRecording">Stop Recording</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      audioChunks: []
    };
  },
  methods: {
    startRecording() {
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          this.mediaRecorder = new MediaRecorder(stream);
          this.mediaRecorder.addEventListener("dataavailable", event => {
            this.audioChunks.push(event.data);
          });
          this.mediaRecorder.start();
        });
    },
    stopRecording() {
      this.mediaRecorder.stop();
      const audioBlob = new Blob(this.audioChunks);
      const audioUrl = URL.createObjectURL(audioBlob);
      // do something with audioUrl, such as playing it back or sending it to a server
    }
  }
};
</script>

这个示例代码创建了一个包含“Start Recording”和“Stop Recording”按钮的组件。当用户点击“Start Recording”按钮时，它将请求访问麦克风，并在获取到MediaStream对象后创建一个MediaRecorder对象来记录音频。每当MediaRecorder对象生成新的数据块时，它都会将数据块添加到audioChunks数组中。当用户点击“Stop Recording”按钮时，它会停止MediaRecorder对象并将audioChunks数组中的所有数据块合并为一个Blob对象。最后，它使用URL.createObjectURL()方法将Blob对象转换为可播放的URL，并将其存储在audioUrl变量中。你可以将audioUrl用于播放录音或将其发送到服务器进行后续处理。