您的当前位置:首页>全部文章>文章详情

【UniApp】UniApp原生讯飞语音插件-YL-SpeechRecognition

CrazyPanda发表于:2023-12-07 14:29:07浏览:399次TAG:

b5a77db0cdbd436188c23d52d8838748.png

由于插件文档图片部分可能无法显示,可以移步到CSDN博客,查看完整文档:https://blog.csdn.net/baiyuliang2013/article/details/130925332

插件说明:

支持安卓IOS双端!

新版本已由必须联系本人打离线包,升级为线上购买后自主导入sdk打包,更方便快捷!当然,您在使用时遇到问题依然可以联系本人QQ:453503875,微信:同qq。

若您只需要安卓端,可使用:Uts版插件:https://ext.dcloud.net.cn/plugin?id=14794,此插件同样支持线上购买,自行替换讯飞sdk打包,方便快捷!

如果,您有其它语音相关需求,如唤醒,评测等,或者有其它插件定制需求,仍然可以联系本人!

插件使用说明:

1.先从讯飞官网下载sdk:

1).
在这里插入图片描述
2).

在这里插入图片描述

2.购买并选择导入项目后,配置原生插件:

在这里插入图片描述

3.在项目根目录创建原生插件目录(文件夹名称保持一致),将自己下载的讯飞sdk导入:

在这里插入图片描述

  • nativeplugins

    • android
      -libs

    • ios

    • 安卓sdk

    • iosSDK

    • YL-SpeechRecognition

安卓的sdk放入YL-SpeechRecognition/android/libs目录下,ios的framework放入YL-SpeechRecognition/ios目录下,文件夹名称一定要保持一致!!!

4.打自定义基座调试,或云打包发行!

1.使用方法:

  • 1.引入插件:

const sr = uni.requireNativePlugin("YL-SpeechRecognition")
  • 2.初始化(注意:科大讯飞的appid,需要自己去科大讯飞官网申请)

//初始化
sr.init("6005f95c");//体验测试阶段可以使用demo的,正式发布需要替换为自己的
//创建文字转语音对象
sr.createTts(code => {}); 
//创建语音转文字对象
sr.createIat(code => {});
  • 3.语音合成:

sr.textToVoice(text,res=>{})
  • 4.语音听写:

sr.voiceToText(res=>{})
  • 5.停止方法

sr.stopSpeaking();//停止语音合成sr.stopListening();//停止语音听写12
  • 6.销毁:(退出页面前销毁)

sr.destroy();
  • 7.其它可供调用的方法:

//语音合成
sr.setSpeaker("aisjiuxu");//设置发音人(可能收费,自己在讯飞后台配置)
sr.pauseSpeaking();//暂停
sr.resumeSpeaking();//恢复
sr.getTtsPath(path=>{});//获取语音文件路径

//语音听写
sr.stopListening();//停止
sr.setVadBos(10 * 1000);//设置语音听写前端点超时时间ms(最大10s,一般按默认即可)
sr.setVadEos(10 * 1000);//设置语音听写后端点超时时间ms(最大10s,一般按默认即可)
sr.setLanguage("");//设置听写语言,默认中文(zh_cn,en_us)
sr.getIatPath(path=>{});//获取语音文件路径

代码示例:

<template>
	<div style="padding: 20rpx;">
		<text style="display: block;margin-bottom: 20rpx;font-size: 20rpx;color: #FF0000;">文字转语音:</text>
		<text>{{text}}</text>
		<div style="display: flex;flex-direction: row;margin-top: 20rpx;">
			<text style="font-size: 20rpx;">状态:</text>
			<text style="margin-bottom: 20rpx;color: #FF0000;font-size: 20rpx;">{{toVoiceStatus}}</text>
		</div>
		<button type="primary" style="margin: 20rpx 0;" plain="true" @click="textToVoice()">语音朗读</button>
		<div style="display: flex;align-items: center;justify-content: space-between;flex-direction: row;">
			<button type="warn" plain="true" @click="stopSpeaking()" style="width: 160rpx;">停止</button>
			<button type="primary" plain="true" @click="pauseSpeaking()" style="width: 160rpx;">暂停</button>
			<button type="primary" plain="true" @click="resumeSpeaking()" style="width: 160rpx;">继续</button>
		</div>

		<text
			style="display: block;margin-top: 50rpx;;margin-bottom: 20rpx;font-size: 20rpx;color: #FF0000;">语音转文字:</text>
		<text style="display: block;margin-bottom: 20rpx;">{{transText}}</text>
		<div style="display: flex;flex-direction: row;">
			<text style="font-size: 20rpx;">状态:</text>
			<text style="margin-bottom: 20rpx;color: #FF0000;font-size: 20rpx;">{{toTextStatus}}</text>
			<text style="font-size: 20rpx;margin-left: 50rpx;">音量:</text>
			<text style="margin-bottom: 20rpx;color: #FF0000;font-size: 20rpx;">{{volume}}</text>
		</div>
		<button type="primary" style="margin: 20rpx 0;" plain="true" @click="voiceToText()">开始录音</button>
		<button type="primary" style="margin: 20rpx 0;" plain="true" @click="stopVoiceToText()">停止录音</button>
        <text style="margin-bottom: 20rpx;color: #FF0000;font-size: 20rpx;">{{path}}</text>
	</div>
</template>

<script>
	// 获取 module 
	const sr = uni.requireNativePlugin("YL-SpeechRecognition")

	export default {
		data() {
			return {
				text: "uni-app是一个使用 Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web、以及各种小程序、快应用等多个平台。",
				toVoiceStatus: "未开始",
				transText: "",
				toTextStatus: "未开始",
				volume: 0,
				path:""
			}
		},
		mounted() {
			//初始化
			sr.init("6005f95c");
			//创建文字转语音对象
			sr.createTts(code => {}); 
			//创建语音转文字对象
			sr.createIat(code => {});
		},
		beforeDestroy() {
			sr.destroy();
		},
		methods: {
			textToVoice() {
				if (this.toVoiceStatus == '未开始' || this.toVoiceStatus == "朗读完成" || this.toVoiceStatus == "朗读停止") {
					sr.textToVoice(this.text, data => {
						console.log(JSON.stringify(data));
						switch (data.code) {
							case 1001:
								this.toVoiceStatus = "开始朗读"
								break;
							case 1002:
								this.toVoiceStatus = "暂停朗读"
								break;
							case 1003:
								this.toVoiceStatus = "继续朗读"
								break;
							case 1004:
								this.toVoiceStatus = "正在缓冲..."
								break;
							case 1005:
								this.toVoiceStatus = "正在朗读..."
								break;
							case 1006:
								this.toVoiceStatus = "朗读完成"
								break;
							case 1007:
								this.toVoiceStatus = "朗读停止"
								break;
						}
					});
				}
			},
			stopSpeaking() {
				sr.stopSpeaking();
			},
			pauseSpeaking() {
				sr.pauseSpeaking();
			},
			resumeSpeaking() {
				sr.resumeSpeaking();
			},
			voiceToText() {
				let that = this;
				sr.voiceToText(data => {
					console.log(JSON.stringify(data));
					if (data.code == 1001) {
						that.toTextStatus = "倾听中,请说话..."
					} else if (data.code == 1006) {
						this.toTextStatus = "倾听完毕"
						sr.getIatPath(path=>{
							that.path=path;
						});
					} else if (data.code == 1007) {
						this.toTextStatus = "停止倾听"
					} else if (data.code == 1008) {
						this.volume = data.msg;
					} else if (data.code == 1009) { //结果
						this.transText = data.msg;
					} else if (data.code == 1010) { //error信息
					  //如果data.msg不为空,则属于报错
					  if(data.msg){
						  this.transText = data.msg;
					  }
					}
				})
			},
			stopVoiceToText() {
				sr.stopListening();
			}
		}
	}
</script>

各种回调状态,可参考以上案例代码!

需要注意的是,安卓和ios平台,在语音听写调用停止方法stopListening时,回调有些许不同:

安卓:1007->1009

IOS:1007->1006->1009->1010

猜你喜欢

【UniApp】uniapp应用如何实现绘画训练和动画制作
uniapp应用如何实现绘画训练和动画制作引言:随着移动互联网技术的不断发展,移动应用程序的开发变得越来越普遍。uniapp作为一款基于Vue.js框架的跨平台开发工具,为开发人员提供了一种简单高效的方式来构建跨平台的应用程序。本文将介绍如何使用uniapp实现绘画训练和动画制作,并附上具体的代码示例。一、绘画训练实现绘画训练可以让用户提升艺术技巧和创造力,uniapp提供了Canvas组件来实现绘画功能。下面是一个简单的绘画训练应用的示例代码:在uniapp的pages目录下创建一个
发表于:2023-12-11 浏览:423 TAG:
【UniApp】uniapp怎么关闭某个页面
在开发Uniapp应用的过程中,常常需要实现关闭某个页面的功能,本文将介绍如何在Uniapp中关闭指定页面。一、通过页面栈管理关闭页面在Uniapp应用中,页面的跳转是通过页面栈管理实现的。页面栈是一个数据结构,用来存储页面之间的跳转关系,每当跳转到一个新页面时,该页面会被添加到页面栈的顶部,当从该页面返回或关闭该页面时,该页面会被从页面栈中弹出。因此
发表于:2023-12-25 浏览:295 TAG:
【UniApp】uniapp禁止页面上下滚动
uniapp禁止页面上下滚动功能场景第一个方法&quot;app-plus&quot;:{&quot;bounce&quot;:&quot;none&quot;}第二个方法功能场景我目前是在用uniapp做一个H5程序,中间有一个排行榜的页面只展示前十名,但是里面的导航是自定义导航栏,会占据文档流的位置,所以背景图宽高固定为100vh 100vw会导致页面比较晃(上下晃动),有损美观,就想办法不让页面出现滚动,我百度了两个方法:第一个方法&quot;app-plus&quot;:{“bounce
发表于:2023-12-12 浏览:400 TAG:
【UniApp】如何在uniapp中实现智能推荐和个性化推送
如何在uniapp中实现智能推荐和个性化推送随着移动互联网的快速发展,用户在使用手机应用的过程中,希望能够得到个性化、智能化的推荐服务。在uniapp框架中,我们可以利用一些常用的技术手段,实现智能推荐和个性化推送功能。本文将介绍如何在uniapp中实现这两个功能,并提供具体的代码示例。一、智能推荐算法智能推荐是一种根据用户的行为和偏好,自动给用户推荐最相关的内容。常见的智能推荐算法有基于协同过滤的算法、基于内容的算法和基于深度学习的算法。在uniapp中,我们可以使用uniCloud
发表于:2023-12-24 浏览:341 TAG:
【UniApp】uniapp怎么引入外部css文件
随着前端技术的持续发展,越来越多的开发者开始使用uni-app进行跨平台开发。而其中一个必不可少的功能就是引入外部的CSS文件,以便更好地定制页面的样式。那么,在uni-app中,我们应该如何引入外部的CSS文件呢?本篇文章将为您一一详细介绍。一、在Vue组件中引入外部CSS文件在uni-app中,我们可以使用Vue组件来构建页面。因此,我们可以直接在Vue组件中引入外部的CSS文件。首先,在项目的根目录下创建一个新的CSS文件,例如styles.css。接着,在需要引入CSS的Vue
发表于:2023-12-16 浏览:393 TAG:
【UniApp】uniapp实现如何使用字体图标
Uniapp是一种基于Vue.js框架的跨平台开发框架,可以将应用程序同时打包成Android、iOS、Web等多个平台的应用。在Uniapp中使用字体图标是非常常见的需求,本文将详细介绍如何在Uniapp中使用字体图标,并提供相应的代码示例。一、准备工作在开始之前,需要先准备好需要使用的字体图标文件。常见的字体图标库有Font Awesome、Iconfont等,可以通过官方网站下载对应的字体文件(通常是.woff或.ttf格式)。下载完成后,将字体文件放置在项目的static目录中
发表于:2023-12-23 浏览:338 TAG:
【UniApp】UniApp实现动态效果与动画展示的设计与开发方法
UniApp是一款基于Vue.js开发的跨平台应用框架,可以将Vue代码转化为不同平台的原生代码,比如小程序、App和H5等。它提供了丰富的组件和插件,可以帮助开发者快速构建功能丰富的应用。本文将介绍如何使用UniApp实现动态效果与动画展示的设计与开发方法,并附上相应的代码示例。使用CSS动画UniApp支持使用CSS3的transition和animation属性来实现动画效果。可以通过在组件的style属性中定义相应的动画样式来实现。示例代码:&lt;template&gt; &amp;
发表于:2023-12-12 浏览:351 TAG:
【UniApp】uniapp项目vue2/vue3引入使用vant组件库
前言vant是一个优秀的移动端组件库,他支持VUE2、VUE3、微信小程序三个框架,这期就来尝试在uniapp中,vue2和vue3分别引入vant组件库 注意:本教程只适用H5,无法运行到微信小程序Vue3引入vant新建一个uniapp项目,取名为 vue3-vant ,记得版本选择vue3 2. npm安装vant,要注意安装版本, 链接如下:https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart可能会遇到上图错误,遇到的话在终端输入,n
发表于:2023-12-21 浏览:843 TAG:
【UniApp】uniapp App端 实现pdf文件预览
一、下载pdf预览需要用到的相关文件(即hybrid文件夹)微信关注公众号【海贼王部落】,回复【uniapp】,获取网盘下载链接。二、将步骤一下载解压得到的hybrid文件夹放在/src目录下,即 /src/hybrid三、预览pdf1、预览pdf需要用到uniapp的webview组件,所以注册并创建一个专门用于预览pdf的页面,页面使用webview组件。/pages/webview/index.vue:&lt;template&gt;&lt;view&nbsp;style=&quot;wi
发表于:2023-12-08 浏览:349 TAG:
【UniApp】uniapp 实现抽奖幸运大转盘功能
实现抽奖幸运大转盘功能。效果图:资源图片:&nbsp;如果奖品是支持动态的,需要自己重新改一下布局,逻辑不变。代码:&lt;template&gt; &lt;view&nbsp;class=&quot;relative&quot;&gt; &lt;image&nbsp;:src=&quot;require(&#39;@/static/newPerson/bj.png&#39;)&quot;&nbsp;mode=&quot;widthFix&quot;&nbsp;class=&quot;&amp;q
发表于:2023-12-12 浏览:428 TAG: