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后端进行处理。
请注意，在实际部署中，您需要根据您的环境和需求进行适当的配置和安全措施，例如身份验证、文件上传大小限制等。
希望这可以帮助到您！如有其他问题，请随时提问。
