在Vue中实现录音转文字功能，可以使用Recorder.js库进行录音处理，并使用语音识别API（如百度AI, Google Cloud等）将录音转换成文字。以下是一个简单的例子：
- 安装
recorder-js库：
npm install recorder-js
- 在Vue组件中使用
Recorder.js进行录音，并发送录音文件到服务器进行转写：
<template>
<div>
<button @click="startRecording">开始录音</button>
<button @click="stopRecording" :disabled="!isRecording">停止录音</button>
</div>
</template>
<script>
import Recorder from 'recorder-js';
export default {
data() {
return {
recorder: new Recorder(),
isRecording: false,
};
},
methods: {
startRecording() {
this.isRecording = true;
this.recorder.clear();
this.recorder.record();
},
async stopRecording() {
this.isRecording = false;
this.recorder.stop();
const blob = await this.recorder.exportWAV();
const formData = new FormData();
formData.append('file', blob, 'recording.wav');
// 发送formData到服务器进行转写
// 使用你选择的语音识别API
const transcription = await this.convertToText(formData);
console.log(transcription);
},
async convertToText(formData) {
const response = await fetch('/api/convert-text', {
method: 'POST',
body: formData,
});
const data = await response.json();
return data.text; // 假设API返回格式 { text: '转写后的文本' }
},
},
};
</script>
在上述代码中，我们定义了两个按钮，一个用于开始录音，另一个用于停止录音。点击开始按钮时，我们使用Recorder.js开始录音，点击停止按钮时，停止录音并将录音文件发送到服务器进行转写。
服务器端需要实现一个API接口来处理录音文件并返回转写后的文本。这个API接口可以使用第三方语音识别服务，如AWS Transcribe, Google Cloud Speech to Text, 或百度AI等。
注意：实际应用中，你需要替换convertToText方法中的API端点和转写逻辑以适配你使用的语音识别API服务。