科大讯飞语音听写在vue2中的使用

article/2025/8/20 17:37:20

在这里插入图片描述

安装 worker-loader版本是2.0.0
vue.config.js的配置如下
chainWebpack:(config)=>{config.output.globalObject("this");
},
configureWebpack: (config) => {config.module.rules.push({test: /\.worker.js$/,use: {loader: "worker-loader",options: { inline: true, name: "workerName.[hash].js" },},});
}

transcode.worker.js文件

// (function(){self.onmessage = function(e){transAudioData.transcode(e.data)}let transAudioData = {transcode(audioData) {let output = transAudioData.to16kHz(audioData)output = transAudioData.to16BitPCM(output)output = Array.from(new Uint8Array(output.buffer))self.postMessage(output)// return output},to16kHz(audioData) {var data = new Float32Array(audioData)var fitCount = Math.round(data.length * (16000 / 44100))var newData = new Float32Array(fitCount)var springFactor = (data.length - 1) / (fitCount - 1)newData[0] = data[0]for (let i = 1; i < fitCount - 1; i++) {var tmp = i * springFactorvar before = Math.floor(tmp).toFixed()var after = Math.ceil(tmp).toFixed()var atPoint = tmp - beforenewData[i] = data[before] + (data[after] - data[before]) * atPoint}newData[fitCount - 1] = data[data.length - 1]return newData},to16BitPCM(input) {var dataLength = input.length * (16 / 8)var dataBuffer = new ArrayBuffer(dataLength)var dataView = new DataView(dataBuffer)var offset = 0for (var i = 0; i < input.length; i++, offset += 2) {var s = Math.max(-1, Math.min(1, input[i]))dataView.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true)}return dataView},}
// })()

crypto-js如有需要安装
IatRecorder.js

import CryptoJS from "crypto-js";
import TransWorker from "@/components/speechRecognition/transcode.worker";
import { getWebsocket } from "@/api/websocket/websocket";
let transWorker = new TransWorker();
//APPID,APISecret,APIKey在控制台-我的应用-语音听写(流式版)页面获取const APPID = " "const API_SECRET = " "const API_KEY = " "/*** 获取websocket url* 该接口需要后端提供,这里为了方便前端处理*/
function getWebSocketUrl() {return new Promise((resolve, reject) => {// 请求地址根据语种不同变化getWebsocket().then((res) => {resolve(res.data.data.url);});});
}
export default class IatRecorder {constructor({ language, accent, appId } = {}) {let self = this;this.status = "null";this.language = language || "zh_cn";this.accent = accent || "mandarin";this.appId = appId || APPID;// 记录音频数据this.audioData = [];// 记录听写结果this.resultText = "";// wpgs下的听写结果需要中间状态辅助记录this.resultTextTemp = "";transWorker.onmessage = function (event) {self.audioData.push(...event.data);};}// 修改录音听写状态setStatus(status) {this.onWillStatusChange &&this.status !== status &&this.onWillStatusChange(this.status, status);this.status = status;}setResultText({ resultText, resultTextTemp } = {}) {this.onTextChange && this.onTextChange(resultTextTemp || resultText || "");resultText !== undefined && (this.resultText = resultText);resultTextTemp !== undefined && (this.resultTextTemp = resultTextTemp);}// 修改听写参数setParams({ language, accent } = {}) {language && (this.language = language);accent && (this.accent = accent);}// 连接websocketconnectWebSocket() {return getWebSocketUrl().then((url) => {let iatWS;if ("WebSocket" in window) {iatWS = new WebSocket(url);} else if ("MozWebSocket" in window) {iatWS = new MozWebSocket(url);} else {alert("浏览器不支持WebSocket");return;}this.webSocket = iatWS;this.setStatus("init");iatWS.onopen = (e) => {this.setStatus("ing");// 重新开始录音setTimeout(() => {this.webSocketSend();}, 500);};iatWS.onmessage = (e) => {this.result(e.data);};iatWS.onerror = (e) => {this.recorderStop();};iatWS.onclose = (e) => {this.recorderStop();};});}// 初始化浏览器录音recorderInit() {navigator.getUserMedia =navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia;// 创建音频环境try {this.audioContext = new (window.AudioContext ||window.webkitAudioContext)();this.audioContext.resume();if (!this.audioContext) {alert("浏览器不支持webAudioApi相关接口");return;}} catch (e) {if (!this.audioContext) {

http://chatgpt.dhexx.cn/article/oi7YhP5d.shtml

相关文章

vue+科大讯飞语音听写功能(解决针对vue new Worker报错问题)

参考1&#xff1a;vue科大讯飞语音听写功能(解决针对vue new Worker报错问题)_Other world的博客-CSDN博客 参考2&#xff1a;vue中使用web worker - Gerryli - 博客园 参考3&#xff1a;将PC浏览器、ZOOM等软件正在播放的音频实时转成文字&#xff01;讯飞语音输入法的妙用 -…

Unity2021接入讯飞语音听写(Android)

使用的引擎工具&#xff1a; Unity2021.3.19 android-studio-2021.1.21 第一步&#xff1a; 新建一个Android项目&#xff08;工程名字随便啦&#xff09; 然后新建一个library &#xff08;同上&#xff0c;库名自己命名吧&#xff09; Android环境目前就算是初步建立好了。 …

vue2中接入讯飞语音听写

首先先登录https://www.xfyun.cn/&#xff0c;在控制台中创建自己的app&#xff0c;并且拿到APPID。 下载crypto-js 与线程worker npm install crypto-js npm install worker-loader 官网中有示例文件&#xff0c;稍微改造一下&#xff0c;封装成组件就能使用了。 transco…

Java 接入讯飞语音听写Speech to Text(STT)功能

标题 讯飞认证配置封装监听器客户端工具 Speech2TextClient.java 对外开放接口对外开放接口实现结果参考 根据官方提供的 WebIATWS 工具扩展修改&#xff0c;接入了讯飞的语音听写(STT)服务 讯飞认证配置 public class XFAuthorityConfig {public static final String hostUr…

html5语音听写流式,iOS 讯飞语音听写(流式版)

最近项目中用到了讯飞的语音识别,然后稍微看了一下,里面有几个值得注意的点,记录一下,先说语音听写(流式版),实时语音转写后期会附上 ,文末有 demo //语音听写(流式版) 语音听写流式版其实没设么好说的,因为直接有 SDK,导入项目就可以了,需要注意的点就是每个创建的 APP 和 SDK…

科大讯飞语音听写(Android)

前面就不废话了&#xff0c;像申请应用&#xff0c;获取SDK等等&#xff0c;我相信大家应该都会的&#xff0c;科大讯飞采用的是两种语音听写功能,一种带有UI&#xff0c;一种没有UI&#xff0c;本人还是比较笨的&#xff0c;所以就写了较为简单的不带UI的语音听写&#xff0c;…

语音转写和语音听写_如何在Windows 10上使用语音听写

语音转写和语音听写 Windows 10’s Fall Creators Update makes voice dictation much easier to use. Now, you can immediately begin dictation by pressing a key WindowsH on your keyboard. You don’t have to dig through the Control Panel and set anything up first…

【超简单】之基于PaddleSpeech搭建个人语音听写服务

一、【超简单】之基于PaddleSpeech搭建个人语音听写服务 1.需求分析 亲们&#xff0c;你们要写会议纪要嘛&#xff1f;亲们&#xff0c;你们要写会议纪要嘛&#xff1f;亲们&#xff0c;你们要写会议纪要嘛&#xff1f; 当您面对成吨的会议录音&#xff0c;着急写会议纪要而…

遥感技术及高分遥感影像在地震中的应用及高分二号获取

长期以来&#xff0c;地震预报监测、灾害调查、灾情信息获取主要依靠实地勘测手段&#xff0c;其获取的数据精度和置信度虽然较高&#xff0c;但存在工作量大、效率低、费用高和信息不直观等缺点。遥感技术手段可在一定程度上克服传统实地勘测手段的缺点&#xff0c;并具有其他…

高分一号(GF-1)-中国高分辨率对地观测系统的第一颗卫星

2013年4月26日12时13分04秒由长征二号丁运载火箭成功发射&#xff0c;开启了中国对地观测的新时代。卫星全色分辨率是2米&#xff0c;多光谱分辨率为8米。高分一号卫星的宽幅多光谱相机幅宽达到了800公里。 “高分一号”的特点是增加了高分辨率多光谱相机&#xff0c;该相机的性…

历年(2017-2022)国产陆地观测卫星(高分1号2号6号等)外场绝对辐射定标系数

国产卫星绝对辐射定标系数&#xff08;2008——2022&#xff09; 2017年 参考博文&#xff1a;高分一号/二号/六号定标系数_desertsTsung的博客-CSDN博客

第059篇:高分二号遥感影像预处理流程(ENVI5.3.1平台+ENVI App Store中最新的中国国产卫星支持工具)

今天被袁老的新闻刷屏&#xff0c;湖南衡水县水稻基地传出好消息&#xff1a; 袁隆平团队第三代杂交水稻测产&#xff0c;测得晚稻平均亩产为911.7公斤 早稻晚稻实现亩产3061斤 伟大&#xff0c;除了伟大&#xff0c;不知道还能用什么词概括袁老的不凡成就&#xff01; 说到这…

envi5.3处理高分二号影像数据详细过程记录

目录 一、多光谱影像处理 1. 辐射定标 2.大气校正 1. 需要准备一些数据: 2.大气校正过程 3、正射校正 二、全色影像处理 1. 辐射定标 2. 正射校正 三、图像融合 1.几何配准 2.图像融合 高分二号处理流程 envi5.3的安装教程&#xff1a; ENVI5.3安装 安装完ENVI5.3后…

我国高分系列卫星遥感影像介绍

继上一篇介绍《遥感图像处理》的文章之后&#xff0c;本篇文章对我国的高分系列卫星遥感影像进行简单的整理。 高分系列卫星是在高分专项的支持下&#xff0c;也就是高分辨率对地观测系统重大专项&#xff0c;由国防科技工业局牵头&#xff0c;组织实施建设的一系列高分辨率对…

高分辨率遥感卫星影像在交通方面的应用及高分二号影像获取

高分辨率遥感影像在城市交通领域具有广泛的应用前景&#xff1a;如遥感交通调查、遥感影像地图与电子地图制作、道路工程地质遥感解译、交通安全与知道抗灾救灾、交通事故现场快速勘察、交通需求预测、车辆与车牌视频识别等等。高分辨率影像比如高分二号卫星、高分一号卫星&…

中国高分系列卫星介绍

中国高分系列卫星 中国高分系列卫星是"高分专项"所规划的高分辨率对地观测的系列卫星。它是《国家中长期科学和技术发展规划纲要&#xff08;2006&#xff5e;2020年&#xff09;》所确定的16个重大专项之一。由于课程汇报&#xff0c;所以作了一个PPT&#xff0c;在…

高分二号(GF-2)号卫星数据的查询下载地址和方法

高分二号卫星是我国自主研制的首颗空间分辨优于1米的民用光学遥感卫星可在平台中查询到&#xff0c;搭载有两台高分辨率1米全色、4米多光谱相机&#xff0c;具有亚米级空间分辨率、高定位精度和快速姿态机动能力等特点&#xff0c;有效地提升了卫星综合观测效能&#xff0c;达到…

遥感科普|中国高分系列卫星综述(2020版)

遥感科普|中国高分系列卫星综述(2020版) 文章来源&#xff1a;卫星遥感大数据公众号 高分系列卫星概述 中国高分系列卫星是"高分专项"所规划的高分辨率对地观测的系列卫星。它是《国家中长期科学和技术发展规划纲要&#xff08;2006&#xff5e;2020年&#xff09…

国产高分系列卫星平台介绍

目录 高分专项 高分一号&#xff08;GF-1&#xff09; 高分二号&#xff08;GF-2&#xff09; 高分三号&#xff08;GF-3) 高分四号&#xff08;GF-4&#xff09; 高分五号&#xff08;GF-5) 高分六号&#xff08;GF-6&#xff09; 高分七号&#xff08;GF-7&#xff09; 高分八…

高分三号卫星介绍

博主现在要用到高分三号卫星&#xff0c;但是因为高三2016年8月才发射&#xff0c;目前网上相关资料较少&#xff0c;便总结了一些相关信息&#xff0c;希望能为大家提供帮助~ 传感器 高分三号卫星搭载的传感器是C频段多极化合成孔径雷达&#xff0c;是迄今为止世界上成像模式…