如何将原生JS实时录音代码转换为Vue.js组件？

// src/assets/recorder.js  (文件名修改为更规范的recorder.js)

let audioContext = null;
let recorder = null;
let ws = null;

function initAudioContext() {
  if (!audioContext) {
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
  }
}

export function beginRecord() {
  initAudioContext();
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      recorder = new Recorder(stream, { sampleRate: 16000 }); // 使用更合理的采样率
      recorder.record();
      console.log('Recording started');
    })
    .catch(err => {
      console.error('Error accessing microphone:', err);
    });
}

export function stopRecord() {
  if (recorder) {
    recorder.stop();
    recorder.exportWAV(blob => {
      // 将blob数据发送到WebSocket服务器
      const reader = new FileReader();
      reader.onload = function(e) {
        const base64Data = e.target.result.split(',')[1];
        if (ws && ws.readyState === WebSocket.OPEN) {
          ws.send(base64Data);
          console.log('Audio data sent');
        } else {
          console.error('WebSocket not connected or not open');
        }
      };
      reader.readAsDataURL(blob);
      recorder = null;
      console.log('Recording stopped');
    });
  }
}

// Recorder类 (需要引入一个录音库，例如Recorderjs)
//  这个地方需要引入一个实际的录音库，例如Recorderjs，并根据库的API修改代码。
//  以下代码仅为示例，需要根据实际库进行调整。
class Recorder {
  constructor(stream, options) {
    this.stream = stream;
    this.options = options;
    // ... Recorderjs 的初始化代码 ...
  }
  record() {
    // ... Recorderjs 的开始录音代码 ...
  }
  stop() {
    // ... Recorderjs 的停止录音代码 ...
  }
  exportWAV(callback) {
    // ... Recorderjs 的导出WAV代码 ...
  }
}


export function connectWebSocket(url) {
  ws = new WebSocket(url);
  ws.onopen = () => console.log('WebSocket connected');
  ws.onclose = () => console.log('WebSocket closed');
  ws.onerror = error => console.error('WebSocket error:', error);
}

export function disconnectWebSocket() {
  if (ws) {
    ws.close();
    ws = null;
  }
}

<template>
  <div>
    <button @click="beginRecord">开始录音</button>
    <button @click="stopRecord">停止录音</button>
  </div>
</template>

<script>
import { beginRecord, stopRecord, connectWebSocket, disconnectWebSocket } from '@/assets/recorder.js';

export default {
  data() {
    return {
      websocketUrl: 'ws://your-websocket-server-url' // 替换为你的WebSocket服务器地址
    };
  },
  mounted() {
    connectWebSocket(this.websocketUrl);
  },
  beforeUnmount() {
    disconnectWebSocket();
  },
  methods: {
    beginRecord,
    stopRecord
  }
};
</script>

npm install recorderjs
// or
yarn add recorderjs