vue讯飞实时语音转写 语音听写

### 集成科大讯飞实时语音转写功能于Vue项目 #### 准备工作 为了在Vue项目中集成科大讯飞的实时语音转写功能，需先完成必要的准备工作。这包括获取科大讯飞开放平台上的API密钥以及安装所需的依赖库。 #### 安装依赖项 确保已安装`websocketchat`或其他适用于Websocket通信的npm包来处理与科大讯飞服务器之间的连接[^2]： ```bash npm install websocketchat --save ``` 实际上，具体使用的WebSocket库取决于科大讯飞文档中的推荐或个人偏好；上述命令仅为示意性质。 #### 创建语音识别服务类 创建一个新的JavaScript模块（例如命名为`SpeechRecognitionService.js`），用来封装同科大讯飞交互所需的方法: ```javascript // SpeechRecognitionService.js import { createSocket } from 'some-websocket-package'; // 替换成实际使用的websocket库 class SpeechRecognitionService { constructor(appId, apiKey) { this.appId = appId; this.apiKey = apiKey; this.socketUrl = `wss://ws-api.xfyun.cn/v1/iat?appid=${this.appId}&token=${this.getAccessToken()}`; this.wsClient = null; } getAccessToken() { /* 获取accessToken逻辑 */ return "your_access_token"; } connect() { const wsInstance = createSocket(this.socketUrl); wsInstance.on('open', () => console.log('Connected to iFlytek WebSocket')); wsInstance.on('message', (data) => console.log(`Received message: ${JSON.stringify(data)}`)); wsInstance.on('close', () => console.log('Disconnected')); this.wsClient = wsInstance; } sendAudio(audioData) { if (!this.wsClient || !this.wsClient.readyState === 1) throw new Error("WebSocket is not connected"); this.wsClient.send(JSON.stringify({ data: audioData })); } } export default SpeechRecognitionService; ``` 此部分代码展示了如何建立至科大讯飞的服务端口链接并定义发送音频数据给对方的方式。 #### 构建Vue组件 接下来，在Vue组件内部引入刚才创建的服务，并编写UI界面让用户能够上传录音文件或是录制新的声音片段再传递给后台进行分析转换为文本形式显示出来。 ```html <template> <div class="speech-recognition"> <button @click="startRecording">Start Recording</button> <button v-if="isRecording" @click="stopAndTranscribe">Stop & Transcribe</button> <p>{{ transcription }}</p> </div> </template> <script> import SpeechRecognitionService from './path/to/SpeechRecognitionService'; let recognitionSvc; export default { name: 'VoiceToText', data() { return { isRecording: false, transcription: '' }; }, methods: { async startRecording() { try { navigator.mediaDevices.getUserMedia({audio: true}) .then(stream => { let chunks = []; const mediaRecorder = new MediaRecorder(stream); mediaRecorder.addEventListener('dataavailable', event => chunks.push(event.data)); mediaRecorder.start(); mediaRecorder.addEventListener('stop', async () => { const blob = new Blob(chunks); await transcribe(blob); stream.getTracks().forEach(track => track.stop()); }); this.isRecording = true; function transcribe(blob){ const reader = new FileReader(); reader.onloadend = async () => { const base64String = btoa(reader.result.split(',')[1]); recognitionSvc.connect(); // 建立webscoket连接 setTimeout(() => { recognitionSvc.sendAudio(base64String); // 发送base64编码后的音频数据 recognitionSvc.wsClient.on('message', ({data})=>{ const result = JSON.parse(data).cn.rsl; setTranscription(result.wd.join('')); // 更新transcription属性值 }); }, 500); }; reader.readAsDataURL(blob); }; document.querySelector('[v-if]').addEventListener('click', ()=>{ mediaRecorder.stop(); }) }).catch(err=>console.error(err)) } catch(error){console.warn(error)} } }, mounted(){ recognitionSvc = new SpeechRecognitionService('YOUR_APP_ID','YOUR_API_KEY'); } } </script> ``` 这段模板和脚本实现了基本的功能：启动麦克风权限请求、记录用户的讲话内容并通过WebSocket协议向科大讯飞提交待处理的数据流最终得到返回的结果呈现在界面上。