基于vue+websocket实现web端的实时pcm音频播放

<template>
  <div>
    <audio ref="audioPlayer" controls></audio>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      ws: null,
      buffer: [],
      mediaRecorder: null,
      intervalId: null,
    };
  },
  created() {
    this.connectWebSocket();
  },
  methods: {
    connectWebSocket() {
      this.ws = new WebSocket('ws://your-websocket-server');
      this.ws.onmessage = this.handleMessage;
      this.ws.onopen = this.handleOpen;
      this.ws.onerror = this.handleError;
    },
    handleOpen() {
      console.log('WebSocket connected');
      this.startRecording();
    },
    handleMessage(message) {
      if (message.data instanceof Blob) {
        this.onBlob(message.data);
      }
    },
    handleError(error) {
      console.error('WebSocket Error:', error);
    },
    startRecording() {
      this.mediaRecorder = new MediaRecorder(
        new MediaStream([new MediaStreamTrack(this.createCapturer())]),
        { mimeType: 'audio/webm; codecs=opus' }
      );
      this.mediaRecorder.ondataavailable = this.onBlob;
      this.mediaRecorder.start();
    },
    createCapturer() {
      // 这里需要实现创建捕获器的逻辑，具体取决于你的应用场景
      // 例如从麦克风捕获音频
    },
    onBlob(blob) {
      this.buffer.push(blob);
      if (this.intervalId == null) {
        this.intervalId = setInterval(() => {
          if (this.buffer.length === 0) return;
          const blob = new Blob(this.buffer, { type: 'audio/webm' });
          this.buffer = [];
          this.$refs.audioPlayer.src = URL.createObjectURL(blob);
          this.$refs.audioPlayer.play();
        }, 1000); // 根据需要调整间隔时间
      }
    },
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close();
    }
    if (this.mediaRecorder) {
      this.mediaRecorder.stop();
    }
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
};
</script>

这个代码实例展示了如何在Vue组件中创建一个WebSocket连接，并且使用MediaRecorder API捕获实时的音频流。捕获的音频流会被周期性地发送到服务器，并且实时地在客户端的<audio>元素中播放。这个例子提供了一个基本框架，开发者可以根据自己的应用场景进行具体的实现和调整。