Vue项目使用js-audio-recorder录音，通过WebSocket实时发送音频文件（语音识别）

<template>
  <div>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
  </div>
</template>
 
<script>
import Recorder from 'js-audio-recorder';
 
export default {
  data() {
    return {
      recorder: null,
      isRecording: false,
      recorderWorker: null,
    };
  },
  created() {
    this.recorder = new Recorder({
      sampleRate: 44100, // 采样率
      bitRate: 128, // 比特率
    });
    this.recorderWorker = new Worker('path/to/recorder/worker.js'); // 实际路径
    this.recorder.setWorker(this.recorderWorker);
  },
  methods: {
    startRecording() {
      this.isRecording = true;
      this.recorder.clear();
      this.recorder.record();
    },
    async stopRecording() {
      this.isRecording = false;
      const blob = await this.recorder.stop();
      this.sendAudioChunk(blob);
    },
    sendAudioChunk(blob) {
      const blobToSend = blob; // 可能需要对音频数据进行处理，比如切片
      const blobUrl = URL.createObjectURL(blobToSend);
      const audio = new Audio(blobUrl);
      audio.play(); // 播放录音，确保发送的是可播放的音频文件
 
      // 创建 WebSocket 连接
      const ws = new WebSocket('wss://your-websocket-server.com');
      ws.onopen = () => {
        ws.send(blobToSend); // 发送音频文件
      };
 
      // 清理工作
      ws.onclose = () => {
        URL.revokeObjectURL(blobUrl);
        audio.pause();
        audio.src = '';
        ws.close();
      };
    },
  },
};
</script>

在这个例子中，我们首先在组件的 created 钩子中初始化 Recorder 实例，并设置工作线程。然后定义了 startRecording 和 stopRecording 方法，分别用于开始和停止录音，并将录制下来的音频通过 WebSocket 实时发送。注意，你需要替换 'path/to/recorder/worker.js' 为实际的工作线程文件路径，以及 'wss://your-websocket-server.com' 为你的 WebSocket 服务器地址。