vue 实现前端录音并播发，把音频传给后端接口处理

1.创建Vue组件：首先，创建一个Vue组件，用于控制录音的开始和停止，并展示录制的音频。

<template>
  <div>
    <button v-if="!isRecording" @click="startRecording">开始录音</button>
    <button v-else @click="stopRecording">停止录音</button>
    <audio v-if="recordedAudio" ref="audioPlayer" controls></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
      recordedAudio: null,
      mediaRecorder: null,
      chunks: []
    };
  },
  methods: {
    startRecording() {
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          this.isRecording = true;
          this.mediaRecorder = new MediaRecorder(stream);
          this.mediaRecorder.addEventListener('dataavailable', this.handleDataAvailable);
          this.mediaRecorder.start();
        })
        .catch(error => {
          console.error('无法访问麦克风：', error);
        });
    },
    stopRecording() {
      this.isRecording = false;
      this.mediaRecorder.stop();
        const blob = new Blob(this.chunks, { type: 'audio/webm' });
      const formData = new FormData();
      formData.append('audio', blob, 'recording.webm');
      // 发送音频数据到后端的API接口
      axios.post('/api/processing', formData)
        .then(response => {
          // 处理后端返回的响应
        })
        .catch(error => {
          // 处理请求错误
        });
    },
    handleDataAvailable(event) {
      this.chunks.push(event.data);
      if (this.mediaRecorder.state === 'inactive') {
        this.processRecordedAudio();
      }
    },
    processRecordedAudio() {
      const blob = new Blob(this.chunks, { type: 'audio/webm' });
      this.recordedAudio = URL.createObjectURL(blob);
      this.$refs.audioPlayer.src = this.recordedAudio;
    }
  }
};
</script>

在上面的示例中，我们使用getUserMedia方法获取麦克风的音频流。当点击"开始录音"按钮时，我们创建一个MediaRecorder实例，并在每次数据可用时将数据存储到chunks数组中。当点击"停止录音"按钮时，我们停止录音。一旦录音完成（MediaRecorder的状态为"inactive"），我们将处理存储的音频数据，并通过URL.createObjectURL将其转换为URL，然后将其应用于<audio>元素。

2.后端（Spring Boot）：

创建处理音频的接口：在Spring Boot后端中，创建一个接收音频文件的API接口。可以使用Spring MVC的@RestController和@PostMapping注解来定义该接口。

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/api")
public class AudioProcessingController {

  @PostMapping("/processing")
  public void processAudio(@RequestParam("audio") MultipartFile audioFile) {
    // 在这里处理音频文件
    // 可以使用音频处理库进行语音识别或其他操作
  }
}

在上面的示例中，我们使用@PostMapping注解定义了/api/processing接口，并使用@RequestParam注解来接收音频文件作为请求的参数。

在后端进行音频处理：在processAudio方法中，您可以使用适当的音频处理库（如CMU Sphinx、DeepSpeech等）来处理接收到的音频文件。根据您的需求，可以进行语音识别、音频转换或其他音频处理操作。
请确保您的Spring Boot项目中已经正确配置了文件上传和依赖项，例如使用spring-boot-starter-web和spring-boot-starter-tomcat依赖项。

这样，您就可以将录制的音频通过接口传递给Spring Boot后端进行处理。

请注意，在实际部署中，您需要根据您的环境和需求进行适当的配置和安全措施，例如身份验证、文件上传大小限制等。

希望这可以帮助到您！如有其他问题，请随时提问。