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

最新推荐文章于 2025-06-12 15:37:41 发布
最新推荐文章于 2025-06-12 15:37:41 发布
阅读量3.3k 收藏 25
点赞数 15
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Go_ahead_forever/article/details/135139800
本文介绍了如何使用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 请说明来意

科大讯飞实时语音转写
weixin_45992894的博客
02-29 3036
官方文档：https://www.xfyun.cn/doc/asr/rtasr/API.html。单纯记录使用过程，效果比paddlespeech转写效果要好。1.需要申请先APPID、API_KEY。3.引入了下载的官方案例中的几个文件。2.把官方案例js的示例下载下来。
vue 利用科大讯飞实现实时语音转写
m0_62131346的博客
07-15 6666
vue 语音转文字
Vue + Vant 项目集成讯飞语音听写功能及常见问题解决方案
最新发布
G1870719370的博客
06-12 672
本文详细介绍了在Vue + Vant项目中集成讯飞开放平台语音听写功能的完整过程，并针对开发过程中可能遇到的常见问题，如浏览器对Date请求头的限制、Buffer对象在浏览器环境中不存在以及初始化错误等，提供了深入的分析和多种解决方案。理解讯飞语音听写API的基本集成流程。掌握在前端项目中处理音频录制和发送的方法。解决浏览器安全策略带来的跨域和请求头限制问题，特别是通过后端代理或WebSocket进行鉴权。处理浏览器环境中Node.js特有对象（如Buffer）的兼容性问题。排查和解决。
【亲测免费】 科大讯飞实时语音转文字Vue.js版本
gitblog_09772的博客
09-05 645
科大讯飞实时语音转文字Vue.js版本 【下载地址】科大讯飞实时语音转文字Vue.js版本 本仓库提供了一个基于Vue.js的实现方案，用于集成科大讯飞的实时语音转文字功能。通过这个项目，开发者可以轻松地在Vue应用程序中添加高效、准确的语音识别功能。科大讯飞作为国内领先的智能语音技术提供商，其WebAPI接口被广泛应用...
利用讯飞语音听写接口实现实时语音转写.doc
03-02
讯飞语音，识别真的很准确。 讯飞语音转写，实时的贵，不实时的慢。。。 今天尝试了用讯飞听写通过流的方式实现实时转写。 主要思路是这样。首先确认pcm文件的保存路径。 然后创建一个线程不断读写pcm内的内容变化。 每次读取1024*1024字节调用 mIat.writeAudio(byte[] var1, int var2, int var3)方法，等待回调结果。 记录每次的回调结果，拼接字符串。 部分代码如下，下面代码是完整pcm文件的转写的代码。准确率和讯飞网页的识别率相差无几。 实现了之后发现。讯飞听写接口认证后才20000/天，没有认证500/天。可能讯飞也知道这个漏洞才加的限制吧
科大讯飞实时语音转文字vuejs版本
07-26
科大讯飞实时语音转文字webapi版本，此资源为vue版本。
vue实现科大讯飞实时语音听写（流式的）！
weixin_44874327的博客
06-20 1486
前提 需要用到科大讯飞的实时语音转写（录音转写实在是太慢了） 问题 科大讯飞只给的普通版本的 没有给vue版，这就很恼火 然后就不停的找，按网上做了好久都是没有解决 解决 解决方法1 https://blog.csdn.net/qq_45963071/article/details/119838275?spm=1001.2014.3001.5502 （这是我最后用的） 解决方法2
科大讯飞实时语音转文字webapi版本，此资源为vue版本
05-12
【科大讯飞实时语音转文字Web API Vue版本】是一个基于Vue.js框架构建的应用，用于实现高效的实时语音识别功能。科大讯飞作为中国领先的智能语音技术提供商，提供了丰富的API接口，使得开发者能够轻松地集成语音转...
hbuilderx中新建vue2或vue3项目运行讯飞语音实时转写
guoruijun_2012_4的专栏
10-22 678
1、第一步2、第二步3、第三步4、第四步5、第5步6、第6步。
讯飞【语音转写】API的完整Demo
01-05
【标题】"讯飞【语音转写】API的完整Demo" 涉及的主要知识点是使用科大讯飞的语音识别技术，通过API接口将音频转换为文字。在这个C#控制台应用程序中，开发者可以学习如何集成讯飞的语音转写服务，并实现一个简单的...
科大讯飞实时语音转写 rtasr
11-19
科大讯飞提供了API接口供开发者集成到自己的应用程序中，通过调用这些接口，开发者可以轻松实现语音转写的功能。例如，压缩包中的"java"文件可能就是科大讯飞提供的Java SDK，包含了实现RTASR功能的相关类库和示例...
用讯飞的语音转文字 用讯飞的语音转文字
06-19
在讯飞语音注册一个账号申请免费的语音转文字功能 写的一个小Demo备用学习 在讯飞语音注册一个账号申请免费的语音转文字功能 写的一个小Demo备用学习
科大讯飞 vue.js 语音听写流式实现
11-27
科大讯飞 vue.js 语音听写流式实现 1、流式实现，非webapi方式 2、websocket连接实时转文字 3、vue.js及传统的html页面双版本实现
讯飞语音转写
MoMo@blog
11-21 2万+
详情见博客： http://www.moblog.top/index.php/2019/11/21/%e8%ae%af%e9%a3%9e%e8%af%ad%e9%9f%b3%e8%bd%ac%e5%86%99/
Vue使用讯飞实时语音识别
qq_45380964的博客
11-11 2177
​ 进入讯飞官方文档实时语音识别通过下载示例demo,这里选择的是demo js. 创建项目并引入js文件 这里使用的是vue项目，便在public下的index.html直接引入了 <script src="./js/hmac-sha256.js"></script> <script src="./js/HmacSHA1.js"></script> <script src="./js/md5.js"></script> <sc
利用讯飞语音听写接口实现实时语音转写。
热门推荐
u013484772的博客
10-19 3万+
讯飞语音，识别真的很准确。 讯飞语音转写，实时的贵，不实时的慢。。。 今天尝试了用讯飞听写通过流的方式实现实时转写。 主要思路是这样。首先确认pcm文件的保存路径。 然后创建一个线程不断读写pcm内的内容变化。 每次读取1024*1024字节调用 mIat.writeAudio(byte[] var1, int var2, int var3)方法，等待回调结果。 记录每次的回调...
vue科大讯飞文字转语音
a3277237063的博客
12-20 601
我点击连接发出电流声音 点击播报报错 希望各位大佬帮忙解决。
Unity对接科大讯飞实时语音转写WebAPI（Windows平台）（一）
cheng219101的专栏
04-30 2516
要实现语音转文字。首先我们需要从麦克风获取到语音数据，这里用到了Microphone类，Unity自带；其次，需要将语音数据发送给讯飞，这里用到的是WebSocketSharp.WebSocket，用习惯了。然后就是按照文档一步步踩坑了。
Vue，js前端实现语音实时转换文字，前端实现浏览器语音实时转换为文字，vue阿里云语音转文字
weixin_41346436的博客
03-24 1万+
Vue，js前端实现浏览器语音实时转换文字功能详解 1.首先总结一下，前端使用实时语音需要使用到HZRecorder.js这个JS文件来实现获取浏览器麦克风话筒权限 大注意：HZRecorder.js获取话筒权限如果你在本地运行会发现正常可以使用，在发布线上不能用，那是因为线上地址不是https域名，不安全，所以浏览器默认不会给话筒权限 2.HZRecorder.js文件 ;(function (window) { //兼容 window.URL = window.URL || window.web
vue讯飞实时语音转写 语音听写
02-09
### 集成科大讯飞实时语音转写功能于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、付费专栏及课程。

余额充值