vue vosk 录音 播放

### 实现方案 要在 Vue 项目中集成 Vosk 并实现录音与播放功能，可以按照以下方式设计架构： #### 后端部分：Vosk 的配置 Vosk 是一个强大的离线语音识别工具，它支持多种语言并提供简单的 API 接口[^1]。为了将其用于录音和音频处理，需先设置好后端服务来接收前端发送的音频数据，并通过 Vosk 进行转录。 以下是后端的一个简单 Python 示例代码片段，展示如何启动服务器以接受来自前端的请求并将音频文件传递到 Vosk 处理器： ```python from vosk import Model, KaldiRecognizer import wave import json from flask import Flask, request, jsonify app = Flask(__name__) model = Model("vosk-model-en-us-0.22") # 加载模型 @app.route('/transcribe', methods=['POST']) def transcribe(): file = request.files['audio'] wf = wave.open(file) rec = KaldiRecognizer(model, wf.getframerate()) result_text = "" while True: data = wf.readframes(4000) if len(data) == 0: break if rec.AcceptWaveform(data): res = json.loads(rec.Result()) result_text += res["text"] final_res = json.loads(rec.FinalResult()) result_text += final_res["text"] return jsonify({"result": result_text}) if __name__ == '__main__': app.run(debug=True) ``` 此脚本创建了一个 RESTful API `/transcribe` 来上传 `.wav` 文件并返回其文本表示形式。 --- #### 前端部分：Vue 和 js-audio-recorder 配合使用 对于前端开发，在 Vue.js 应用程序中可以通过 `js-audio-recorder` 插件轻松完成录音操作[^2]。下面是如何在 Vue 组件内部初始化该插件以及管理录制状态的例子： ```javascript <template> <div> <button @click="startRecording">开始录音</button> <button @click="stopRecording" :disabled="!isRecording">停止录音</button> <audio controls ref="audioPlayer"></audio> </div> </template> <script> import Recorder from 'js-audio-recorder'; export default { name: "AudioRecorder", data() { return { isRecording: false }; }, mounted() { this.initRecorder(); }, methods: { initRecorder() { Recorder.setConfig({ sampleBits: 16, sampleRate: 16000, channelCount: 1, compress: true, recordingGain: 1, }); }, startRecording() { Recorder.start().then(() => (this.isRecording = true)); }, stopRecording() { Recorder.stop() .getMp3((mp3Blob) => { const formData = new FormData(); formData.append('audio', mp3Blob); fetch('http://localhost:5000/transcribe', { method: 'POST', body: formData, }).then(response => response.json()).then(transcription => alert(`Transcribed Text: ${transcription.result}`)); const audioUrl = URL.createObjectURL(mp3Blob); this.$refs.audioPlayer.src = audioUrl; }) .finally(() => (this.isRecording = false)); } } }; </script> ``` 上述模板定义了一组按钮控件分别触发录音过程的不同阶段——开始、暂停/恢复及最终停止记录动作；当用户点击“停止”键时会自动将生成的声音二进制流提交至远程服务器做进一步分析。 --- ### 技术要点说明 - **前后端交互**：利用 Fetch 或 Axios 将客户端捕获的数据传输给后台解析引擎。 - **兼容性考虑**：尽管当前演示仅限于单声道 PCM 编码格式（WAV），但实际应用可能涉及更多复杂场景下的适配工作。 - **用户体验优化**：除了基本功能外还可以加入进度条显示等功能提升界面友好度。