uniapp项目集成科大讯飞语音听写实现语音转文字功能

最新推荐文章于 2025-03-04 15:58:05 发布
最新推荐文章于 2025-03-04 15:58:05 发布
阅读量1.6k 收藏 12
点赞数 4
分类专栏： uniapp 文章标签： uni-app 语音识别 人工智能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Anyuegogogo/article/details/142884440
版权

语音听写（流式版）WebAPI 文档
参考了uniapp社区插件：语音转文字，科大讯飞，实时展示文字，流示输出
参考文档：
开发参考文档
app 安卓端录音授权
【uniapp】使用permission获取录音权限及实现录音功能

要点：

由于是web端的sdk，所以uniapp中是采用renderjs实现
renderjs可以支持我们 在视图层操作dom，运行 for web 的 js库
renderjs uniapp官网解释

使用

参考uniapp插件的作者写的步骤使用就行，下面是我自己基于作者的插件稍微改一点
组件

<template>
	<view>
		<view id="record" class="record" :listeningRecordingBegins="recordFlag" :change:listeningRecordingBegins="record.listeningRecordingBeginsHandler"
			:scriptPath="scriptPath" :change:scriptPath="record.scriptPathHandler" :options="options" :change:options="record.optionsHandler"></view>
	</view>
</template>

<script>
	// import log from '../../api/log';
	export default {
		data() {
			return {
				msg: '',
				recordFlag: null,
				scriptPath: ''
			};
		},
		props: {
			options: {
				type: Object,
				default: () => {
					return {
						receordingDuration: 60,
						APPID: '',
						API_SECRET: '',
						API_KEY: ''
					};
				}
			}
		},
		created() {
			// #ifdef APP
			this.scriptPath = 'file://' + plus.io.convertLocalFileSystemURL('/');
			// #endif
		},
		methods: {
			start() {
				console.log('start', this.recordFlag);
				if (this.recordFlag == 'START') return;
				this.recordFlag = 'START';
			},
			end() {
				console.log('end', this.recordFlag);
				if (this.recordFlag == 'END') return;
				this.recordFlag = 'END';
			},
			resultMsg(e) {
				this.$emit('result', e);
				this.msg = e;
			},
			endCallback(e) {
				this.$emit('onStop', e);
				this.end();
			},
			startCallback(e) {
				this.$emit('onStart', e);
			},
			seconds(e) {
				this.$emit('countDown', e);
			},
			change(e) {
				this.$emit('change', e);
			},
		}
	};
</script>

<script lang="renderjs" module="record">
	import CryptoJS from 'crypto-js';
	let APPID = "4c12ff51";
	let API_SECRET = "ZTUxMjIyMjZiOGRjMGNhNTMwMTgwOTM1";
	let API_KEY = "f946eb15c37c18de1f7f7e2b69daba69";
	let receordingDuration = 60
	let ws = null;
	let resultText = "";
	let resultTextTemp = "";
	let timer = null;
	let tapeStatus = {
		CONNECTING: 'CONNECTING',
		OPEN: 'OPEN',
		CLOSING: 'CLOSING',
		CLOSED: 'CLOSED'
	}
	export default {
		data() {
			return {
				recorder: null,
				recorderPath: '',
			}
		},
		methods: {
			// 监听recordFlag的值的处理
			listeningRecordingBeginsHandler(flag) {
				if (flag == null) return
				if (flag == 'START') {
					this.connectWebSocket()
				} else if (flag == 'END') {
					this.recorder.stop()
				}
			},
			// 动态标签引入js
			scriptPathHandler(path) {
				var recordScript = document.getElementById("recordScript");
				if (recordScript) {
					var script = document.getElementById('recordScript');
					this.recorder = new RecorderManager(path + 'static/dist')
					console.log('有标签了', script, this.recorder);
					this.initListen()
				} else {
					var script = document.createElement('script');
					script.id = 'recordScript'
					script.src = `./static/dist/index.umd.js`;
					document.body.appendChild(script);
					script.onload = () => {
						this.recorder = new RecorderManager(path + 'static/dist')
						this.initListen()
					}
				}
			},
			optionsHandler(options) {
				APPID = options.APPID
				API_SECRET = options.API_SECRET
				API_KEY = options.API_KEY
				receordingDuration = options.receordingDuration
			},
			initListen() {
				this.recorder.onStart = () => {
					this.changeStatus(tapeStatus.OPEN);
				}
				this.recorder.onFrameRecorded = ({
					isLastFrame,
					frameBuffer
				}) => {
					if (ws.readyState === ws.OPEN) {
						ws.send(
							JSON.stringify({
								data: {
									status: isLastFrame ? 2 : 1,
									format: "audio/L16;rate=16000",
									encoding: "raw",
									audio: this.toBase64(frameBuffer),
								},
							})
						);
						if (isLastFrame) {
							this.changeStatus("CLOSING");
						}
					}

				};
				this.recorder.onStop = () => {
					clearInterval(timer);
				};
			},
			connectWebSocket() {
				const websocketUrl = this.getWebSocketUrl();
				if ("WebSocket" in window) {
					ws = new WebSocket(websocketUrl);
				} else if ("MozWebSocket" in window) {
					ws = new MozWebSocket(websocketUrl);
				} else {
					console.log("不支持WebSocket");
					return;
				}
				this.changeStatus(tapeStatus.CONNECTING);
				ws.onopen = () => {
					console.log('this.recorder', this.recorder);
					this.recorder.start({
						sampleRate: 16000,
						frameSize: 1280,
					})
					const params = {
						common: {
							app_id: APPID,
						},
						business: {
							language: "zh_cn",
							domain: "iat",
							accent: "mandarin",
							vad_eos: 5000,
							dwa: "wpgs",
						},
						data: {
							status: 0,
							format: "audio/L16;rate=16000",
							encoding: "raw",
						}
					}
					ws.send(JSON.stringify(params));
				}
				ws.onmessage = (e) => {
					console.log('---message----', e);
					this.renderResult(e.data);
				};

				ws.onerror = (e) => {
					console.error(e);
					this.recorder.stop();
					this.changeStatus(tapeStatus.CLOSED)
				};
				ws.onclose = (e) => {
					this.recorder.stop();
					this.changeStatus(tapeStatus.CLOSED)
				};
			},
			getWebSocketUrl() {
				let url = "wss://iat-api.xfyun.cn/v2/iat";
				const host = "iat-api.xfyun.cn";
				const apiKey = API_KEY;
				const apiSecret = API_SECRET;
				const date = new Date().toGMTString();
				const algorithm = "hmac-sha256";
				const headers = "host date request-line";
				const signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`;
				const signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret);
				const signature = CryptoJS.enc.Base64.stringify(signatureSha);
				const authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
				const authorization = btoa(authorizationOrigin);
				url = `${url}?authorization=${authorization}&date=${date}&host=${host}`;
				return url;
			},
			toBase64(buffer) {
				let binary = "";
				const bytes = new Uint8Array(buffer);
				const len = bytes.byteLength;
				for (let i = 0; i < len; i++) {
					binary += String.fromCharCode(bytes[i]);
				}
				return window.btoa(binary);
			},
			renderResult(resultData) {
				let jsonData = JSON.parse(resultData);
				if (jsonData.data && jsonData.data.result) {
					let data = jsonData.data.result;
					let str = "";
					let ws = data.ws;
					for (let i = 0; i < ws.length; i++) {
						str = str + ws[i].cw[0].w;
					}
					this.$ownerInstance.callMethod('resultMsg', str || '')
					// if (data.pgs) {
					// 	if (data.pgs === "apd") {
					// 		resultText = resultTextTemp;
					// 	}
					// 	resultTextTemp = resultText + str;
					// } else {
					// 	resultText = resultText + str;
					// }
					// this.$ownerInstance.callMethod('resultMsg', resultTextTemp || resultText || '')
				}
				if (jsonData.code === 0 && jsonData.data.status === 2) {
					ws.close();
				}
				if (jsonData.code !== 0) {
					ws.close();
					console.error(jsonData);
				}
			},
			changeStatus(status) {
				let statusText = ''

				if (status === "CONNECTING") {
					statusText = '建立连接中'
					resultText = "";
					resultTextTemp = "";
				} else if (status === "OPEN") {
					statusText = '开始录音'
					this.$ownerInstance.callMethod('startCallback', {
						status,
						msg: statusText
					})
					this.countdown();
				} else if (status === "CLOSING") {
					statusText = '关闭连接中'
				} else if (status === "CLOSED") {
					statusText = "录音已关闭";
					this.$ownerInstance.callMethod('endCallback', {
						status,
						msg: statusText
					})
				}
				this.$ownerInstance.callMethod('change', {
					status,
					msg: statusText
				})
			},
			countdown() {
				let seconds = receordingDuration
				// btnControl.innerText = `录音中（${seconds}s）`;
				timer = setInterval(() => {
					seconds = seconds - 1;

					if (seconds <= 0) {
						clearInterval(timer);
						this.recorder.stop();
					} else {
						this.$ownerInstance.callMethod('seconds', seconds)
						// btnControl.innerText = `录音中（${seconds}s）`;
					}
				}, 1000);
			}
		}

	}
</script>
<style></style>

页面使用

<template>
	<view class="page-container">
		<AppNavbar navBarTitle="语音转写"></AppNavbar>
		<view class="page-content main-content">
			<view class="content">
				<!-- <button @touchstart.stop="start" @touchend.stop="end">按下说话,松开停止</button> -->
				<button @click="start">开始说话</button>
				<button @click="end">停止说话1</button>
				<view style="color:deeppink;font-size: 30rpx;">
					{{msg}}
				</view>
				<!-- 				<yimo-AudioTrans ref="yimoAudioTransRefs" :options="options" @countDown="countDown" @result="resultMsg" @onStop="onStop" @onOpen="onOpen"
					@change="change"></yimo-AudioTrans> -->

				<AudioTrans ref="yimoAudioTransRefs" :options="options" @countDown="countDown" @result="resultMsg" @onStop="onStop" @onOpen="onOpen" @change="change">
				</AudioTrans>
			</view>
		</view>
	</view>
</template>

<script>
	import AppNavbar from '@/components/AppNavbar/navbar.vue';
	import AudioTrans from '@/components/AudioTrans/AudioTrans.vue';

	export default {
		components: {
			AppNavbar,
			AudioTrans
		},
		data() {
			return {
				title: 'Hello',
				msg: '1233',
				options: {
					receordingDuration: 60,
					APPID: '4c12ff51',
					API_SECRET: 'ZTUxMjIyMjZiOGRjMGNhNTMwMTgwOTM1',
					API_KEY: 'f946eb15c37c18de1f7f7e2b69daba69'
				},
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: function(res) {
					const platform = res.platform.toLowerCase();
					if (platform === 'devtools') {
						console.log('-----浏览器环境-----');
					} else if (platform === 'ios' || platform === 'android') {
						//监听授权  
						plus.android.requestPermissions(['android.permission.RECORD_AUDIO'], function(e) {
							if (e.deniedAlways.length > 0) { //权限被永久拒绝    
								// 弹出提示框解释为何需要权限，引导用户打开设置页面开启    
								console.log('权限被永久拒绝' + e.deniedAlways.toString());
							}
							if (e.deniedPresent.length > 0) { //权限被临时拒绝    
								// 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限    
								console.log('权限被临时拒绝' + e.deniedPresent.toString());
							}
							if (e.granted.length > 0) { //权限被允许    
								console.log('权限被允许' + e.granted.toString());
							}
						});
					} else if (platform === 'wechat') {
						console.log('-----微信环境-----');
					} else {
						console.log('-----无法确定当前环境-----');
					}
				},
				fail: function(error) {
					console.log('-----getSystemInfo error-----');
				}
			});
		},
		omShow() {},
		methods: {
			start() {
				this.$refs.yimoAudioTransRefs.start();
			},
			end() {
				this.$refs.yimoAudioTransRefs.end();
			},
			countDown(e) {
				console.log('countDown', e);
			},
			onStop(e) {
				console.log('onStop', e);
			},
			onOpen(e) {
				console.log('onOpen', e);
			},
			change(e) {
				console.log('change', e);
			},
			resultMsg(e) {
				this.msg = e;
				console.log('resultMsg', e);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main-content {
		padding-top: 10%;
	}
</style>

遇到的问题：

在浏览器端正常运行，运行到app端，一直报错 [object DOMException] at static/dist/index.umd.js:1
折磨了好久，后面才发现是安卓端没有授权的问题
授权参考：
manifest.json中加入permissions

"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",

app模块配置打开Record录音
在这里插入图片描述
页面鉴权：

			uni.getSystemInfo({
				success: function(res) {
					const platform = res.platform.toLowerCase();
					if (platform === 'devtools') {
						console.log('-----浏览器环境-----');
					} else if (platform === 'ios' || platform === 'android') {
						//监听授权  
						plus.android.requestPermissions(['android.permission.RECORD_AUDIO'], function(e) {
							if (e.deniedAlways.length > 0) { //权限被永久拒绝    
								// 弹出提示框解释为何需要权限，引导用户打开设置页面开启    
								console.log('权限被永久拒绝' + e.deniedAlways.toString());
							}
							if (e.deniedPresent.length > 0) { //权限被临时拒绝    
								// 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限    
								console.log('权限被临时拒绝' + e.deniedPresent.toString());
							}
							if (e.granted.length > 0) { //权限被允许    
								console.log('权限被允许' + e.granted.toString());
							}
						});
					} else if (platform === 'wechat') {
						console.log('-----微信环境-----');
					} else {
						console.log('-----无法确定当前环境-----');
					}
				},
				fail: function(error) {
					console.log('-----getSystemInfo error-----');
				}
			});
腾讯IM uniapp微信小程序版本实现迅飞语音听写（流式版）
q1003675852的博客
11-16 811
本文主要记录腾讯IM uniapp微信小程序版本实现迅飞语音听写（流式版）
uniapp使用HTTP 接入科大讯飞的语音评测
weixin_48198334的博客
06-13 1467
刚开始我直接使用的是uni.request进行请求，但是接口返回的是409错误，这明细就是提交的参数不符合有问题，所以我逐一排查，定位到时音频文件的问题，因为我的项目获得的是录音的本地路径，然后接口要求时要求上传Binary类型，也就是二进制流文件，所以我想直接拿文件信息然后我使用了uni.getFileSystemManager() 但是文档写着app平台，目前uni-app x支持本API，另见，但uni-app js引擎版还不支持，可部分替代的方案是plus.io。
uniapp中接入科大讯飞语音听写(app端)
weixin_47017648的博客
02-14 783
在项目过程中遇到讯飞返回给我的一直是空数据问题,感觉是因为传过去的数据有问题,因此要确定第一帧的配置信息是否正确,跟每一帧发送的base64是不是不一样的数据,这样返回的数据就不用有问题了。
【uniapp】智能对话机器人-接入科大讯飞API（免费）
最新发布
qq_50694225的博客
03-04 609
智能对话机器人
uniapp语音转文字：科大讯飞的实时展示文字和流式输出
admire_fish的博客
07-27 2212
uniapp语音转文字：科大讯飞的实时展示文字和流式输出
uniapp语音识别（讯飞语音）转文字
约妲己吃火锅的博客
09-23 8513
☞ 常见应用： 游戏界面文字语音、商城导航栏的语音输入搜索框、聊天界面的语音文字输入等. 引自官方 unicloud官方语音： 语音输入接口可使得网页开发人员能快速调用设备的麦克风进行语音输入，而不需要安装额外的浏览器插件。规范不定义底层语音识别引擎的技术架构，浏览器实现可基于语音识别服务器或本地内置语音识别模块。 ▲配置SDK–识别讯飞语音 （如果用不了讯飞语音，可换百度语音，自己去看接入文档） 进入项目根目录下的 manifest.json -> App模块配置->speech 勾选
uniapp小程序语音转文字功能
yhlhelloworld的博客
03-08 5305
做完以上步骤之后，就可以进行开发了，效果图里的业务代码不方便展示，我自己写了个demo可以直接复制粘贴。），左侧菜单栏中的设置-->第三方设置下的插件管理-->添加-->搜索微信同声传译。
uniapp对接科大讯飞实现语音合成
qq_62875177的博客
04-01 2449
【代码】uniapp对接科大讯飞实现语音合成。
UNIAPP调用讯飞语音评测API
p6448777的博客
07-09 4058
语音评测API
uniapp 科大讯飞语音流式听写
04-30
通过集成科大讯飞语音流式听写服务，我们可以在应用中实现语音输入功能，使得用户可以通过语音进行交互。 在Uniapp中，我们可以通过引入科大讯飞语音流式听写的SDK来实现语音输入功能。具体的实现步骤包括： 1. 在...
uniapp 科大讯飞语音听写
09-10
你好！关于使用科大讯飞语音听写在Uniapp上的集成，你可以按照以下步骤进行操作： ...以上是集成科大讯飞语音听写功能的基本步骤，你可以根据需要进行进一步的定制和优化。如果有其他问题，欢迎继续提问！
讯飞离线语音合成（语音+）_uniapptts,vue讯飞语音app
06-05
讯飞离线语音合成，需要本地下载一个语记APP实现，代码简单化了
基于android的语音识别和语音合成的app(科大讯飞).zip
02-23
利用科大讯飞做的一个基于android的语音识别和语音合成的app， 利用科大讯飞做的一个基于android的语音识别和语音合成的app， 利用科大讯飞做的一个基于android的语音识别和语音合成的app， 利用科大讯飞做的一个基于android的语音识别和语音合成的app，
H5讯飞语音听写js
07-18
【标题】：“H5讯飞语音听写js”是指使用HTML5技术，结合科大讯飞提供的WebAPI，实现语音识别、语音合成功能的JavaScript库。它使得开发者能够在网页应用中轻松集成语音输入和输出的功能，提升用户体验，特别是在...
讯飞【语音转写】API的完整Demo
01-05
【标题】"讯飞【语音转写】API的完整Demo" 涉及的主要知识点是使用科大讯飞的语音识别技术，通过API接口将音频转换为文字。在这个C#控制台应用程序中，开发者可以学习如何集成讯飞的语音转写服务，并实现一个简单的...
uniapp 开发app使用科大讯飞语音流式听写，语音合成，语音唤起
07-20
如果你想在 UniApp 中集成科大讯飞的语音识别和语音合成功能，可以利用其提供的云服务 API。 1. **语音流式听写**：科大讯飞的语音识别功能支持实时连续语音输入，通过调用他们的 SDK，开发者可以实现在用户说话时...
语音识别指南
qingqing(C/C++)
10-12 2432
这一篇就够了 python语音识别指南终极版 •语音识别的工作原理； •PyPI 支持哪些软件包;  •如何安装和使用 SpeechRecognition 软件包——一个功能全面且易于使用的 Python 语音识别库。 ▌语言识别工作原理概述 语音识别源于 20 世纪 50 年代早期在贝尔实验室所做的研究。早期语音识别系统仅能识别单个讲话者以及只有约十几个单词的词...
uni-app语音转文字功能demo（小程序同声翻译开箱即用）
qq_17189095的博客
10-11 3456
version版本最好是0.3.3，高于此版本可能会无法使用，并且provider应该都是这个，所以复制即用！至此同声翻译就可以使用了，本文主要使用的是录音完毕后，提供播放录音及翻译录音两个选项，也可以改动后支持同声同步翻译。在mp--weixin的appid（千万别看错了，上方还有一个AppID）同级下写插件的相关信息。新建项目后，选中manifest.json文件，切换至源码视图（右侧菜单栏最下方！demo复制即可使用，只需要修改图片，如果真机运行报错，建议切换真机1.0进行测试。
uni-app系列（十五）：uni-app使用讯飞语音开启App端语音转文字
Mr_chen的博客
09-09 4229
????摘要 今天分享下 —— uni-app 系列（十五）：uni-app uni-app使用讯飞语音开启App端语音转文字 的一些基本知识，欢迎关注！ 欢迎阅读，总结系列：野蛮生长的 uni-app 学习之路 相关文章：uni-app系列（十三）：uni-app运行环境判断 ????开启讯飞语音识别 1、进入项目根目录下的 manifest.json 文件，打开 App模块配置，找到 speech 勾选 讯飞语音识别，如下图所示： 2、页面使用–讯飞语音识别 通过 button 的 @
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值