使用vue项目实现点击路由进行调用录音功能

要实现这个功能，你需要使用Web APIs中的MediaRecorder和getUserMedia函数。MediaRecorder可以录制音频，并将其保存为文件。getUserMedia函数则用于获取用户的音频流，以便MediaRecorder可以录制它。

以下是一个简单的Vue组件，它演示了如何在点击路由时启动录音功能：

<template>
  <div>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording">停止录音</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) => {
          if (event.data.size > 0) {
            this.audioChunks.push(event.data);
          }
        });
        this.mediaRecorder.start();
      });
    },
    stopRecording() {
      this.mediaRecorder.stop();
      const audioBlob = new Blob(this.audioChunks);
      const audioUrl = URL.createObjectURL(audioBlob);
      const audio = new Audio(audioUrl);
      audio.play();
    },
  },
};
</script>

在这个组件中，我们定义了两个按钮：一个用于开始录音，另一个用于停止录音。当用户点击“开始录音”按钮时，我们使用getUserMedia函数获取用户的音频流，并创建一个MediaRecorder对象来录制该流。我们还添加了一个dataavailable事件监听器，以便在录制过程中收集音频数据。当用户点击“停止录音”按钮时，我们停止录制并使用收集到的音频数据创建一个Blob对象，然后将其转换为URL并播放。