通过讯飞 API 接口用 Vue 实现实时语音转写

本文介绍了如何使用Vue和讯飞API接口实现一个点击按钮后可进行60s实时语音转写的项目。开发者自定义了WebSocket通讯逻辑,并提供了设置和运行项目的步骤,以及所需替换的API密钥。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

通过讯飞 API 接口用 Vue 实现实时语音转写

项目地址

前言

本项目中实时语音能够转写的最大时间为 60 s, 这个数据也是由 API 提供方给限制掉的

为什么我会需要这个点击按钮以后能够实现实时语音的转写呢,因为被课程所迫,选了这个方向就必须要实现一下。

因为找了一下点击按钮然后进行语音转写的现成的 Vue 组件没有找到能用的,所以只能够自己写一下啦。具体实现(采用 WebSocket 进行通讯)的代码参考官方提供的 demo,demo 下载地址. 讯飞星火平台还提供其他的 SDK 调用,感兴趣的可以自行研究一下

效果演示

这里只是简单的实现了一下通过点击按钮能够拿到语音识别的结果,如果你有其他的想法,可以对代码进行扩充。

这是我上一次识别结束后的结果:
在这里插入图片描述

你开始录音的时候他会是这样子的,只能进行 60s 的转写,如果需要转写更多只能通过另外的办法
在这里插入图片描述

具体就是点击开始录音就能够开启 60s 的录音并且显示实时转写的结果,就这么简单

具体如何启动使用

  1. 把项目下载到本地
  2. 进入到项目目录,进入命令行模式
  3. 运行
npm install
  1. 然后就是运行项目了
    • 在运行项目之前请到组件目录中去找到 VoiceTranslate.vue 这个组件把其中的APPID,API_KEY,SECRET_KEY替换成你自己的,文件中有详细的注释。
    • 关于如何获取这些直接去创建一个应用就好了,创建好后能够有 500 次的免费额度,新人还能够有一年 5w 次的免费额度
npm run dev
  1. 运行结果如下图:
    在这里插入图片描述

项目结构简述

├─.idea
├─.vscode
├─node_modules
│  ├─.bin
│  ├─.vite
│  │  ├─deps
│  │  └─deps_temp_2e6e8e62
│  ├─@babel
│  │  └─parser
│  │      ├─bin
│  │      ├─lib
│  │      └─typings
│  ├─@esbuild
│  │  └─win32-x64
│  ├─@jridgewell
│  │  └─sourcemap-codec
│  │      └─dist
│  │          └─types
│  ├─@vitejs
│  │  └─plugin-vue
│  │      └─dist
│  ├─@vue
│  │  ├─compiler-core
│  │  │  └─dist
│  │  ├─compiler-dom
│  │  │  └─dist
│  │  ├─compiler-sfc
│  │  │  └─dist
│  │  ├─compiler-ssr
│  │  │  └─dist
│  │  ├─reactivity
│  │  │  └─dist
│  │  ├─reactivity-transform
│  │  │  └─dist
│  │  ├─runtime-core
│  │  │  └─dist
│  │  ├─runtime-dom
│  │  │  └─dist
│  │  ├─server-renderer
│  │  │  └─dist
│  │  └─shared
│  │      └─dist
│  ├─csstype
│  ├─esbuild
│  │  ├─bin
│  │  └─lib
│  ├─estree-walker
│  │  ├─dist
│  │  │  ├─esm
│  │  │  └─umd
│  │  ├─src
│  │  └─types
│  ├─magic-string
│  │  └─dist
│  ├─nanoid
│  │  ├─async
│  │  ├─bin
│  │  ├─non-secure
│  │  └─url-alphabet
│  ├─picocolors
│  ├─postcss
│  │  └─lib
│  ├─rollup
│  │  └─dist
│  │      ├─bin
│  │      ├─es
│  │      │  └─shared
│  │      └─shared
│  ├─source-map-js
│  │  └─lib
│  ├─vite
│  │  ├─bin
│  │  ├─dist
│  │  │  ├─client
│  │  │  ├─node
│  │  │  │  └─chunks
│  │  │  └─node-cjs
│  │  └─types
│  └─vue
│      ├─compiler-sfc
│      ├─dist
│      ├─jsx-runtime
│      └─server-renderer
├─public
└─src
    ├─assets
    ├─components
    └─voice-utils
        ├─dist
        └─utilJS

  • 其中 node—modules 就是依赖库
  • public 里面放了公共的静态资源
  • src
    • assets 里面放了静态资源
    • components 里面放了组件,本项目体态小只有两个组件
      • 一个就是显示的HelloWorld组件
      • 一个就是显示按钮进行语音识别的组件
    • voice-utils 里面放了语音识别的库,这个里面的文件是这个项目的核心文件(来源于迅飞星火的 demo 项目),没有这个语音识别就会运行不起来

有问题请联系作者 Email: 2837468248@qq.com 请说明来意

### 集成科大实时语音转写功能于Vue项目 #### 准备工作 为了在Vue项目中集成科大实时语音转写功能,需先完成必要的准备工作。这包括获取科大开放平台上的API密钥以及安装所需的依赖库。 #### 安装依赖项 确保已安装`websocketchat`或其他适用于Websocket通信的npm包来处理与科大服务器之间的连接[^2]: ```bash npm install websocketchat --save ``` 实际上,具体使用的WebSocket库取决于科大文档中的推荐或个人偏好;上述命令仅为示意性质。 #### 创建语音识别服务类 创建一个新的JavaScript模块(例如命名为`SpeechRecognitionService.js`),用来封装同科大交互所需的方法: ```javascript // SpeechRecognitionService.js import { createSocket } from &#39;some-websocket-package&#39;; // 替换成实际使用的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(&#39;open&#39;, () => console.log(&#39;Connected to iFlytek WebSocket&#39;)); wsInstance.on(&#39;message&#39;, (data) => console.log(`Received message: ${JSON.stringify(data)}`)); wsInstance.on(&#39;close&#39;, () => console.log(&#39;Disconnected&#39;)); 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 &#39;./path/to/SpeechRecognitionService&#39;; let recognitionSvc; export default { name: &#39;VoiceToText&#39;, data() { return { isRecording: false, transcription: &#39;&#39; }; }, methods: { async startRecording() { try { navigator.mediaDevices.getUserMedia({audio: true}) .then(stream => { let chunks = []; const mediaRecorder = new MediaRecorder(stream); mediaRecorder.addEventListener(&#39;dataavailable&#39;, event => chunks.push(event.data)); mediaRecorder.start(); mediaRecorder.addEventListener(&#39;stop&#39;, 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(&#39;,&#39;)[1]); recognitionSvc.connect(); // 建立webscoket连接 setTimeout(() => { recognitionSvc.sendAudio(base64String); // 发送base64编码后的音频数据 recognitionSvc.wsClient.on(&#39;message&#39;, ({data})=>{ const result = JSON.parse(data).cn.rsl; setTranscription(result.wd.join(&#39;&#39;)); // 更新transcription属性值 }); }, 500); }; reader.readAsDataURL(blob); }; document.querySelector(&#39;[v-if]&#39;).addEventListener(&#39;click&#39;, ()=>{ mediaRecorder.stop(); }) }).catch(err=>console.error(err)) } catch(error){console.warn(error)} } }, mounted(){ recognitionSvc = new SpeechRecognitionService(&#39;YOUR_APP_ID&#39;,&#39;YOUR_API_KEY&#39;); } } </script> ``` 这段模板和脚本实现了基本的功能:启动麦克风权限请求、记录用户的讲话内容并通过WebSocket协议向科大提交待处理的数据流最终得到返回的结果呈现在界面上。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xwhking

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值