uni-app语音转文字功能demo(小程序同声翻译开箱即用)

这篇具有很好参考价值的文章主要介绍了uni-app语音转文字功能demo(小程序同声翻译开箱即用)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、同声翻译插件的申请

二、uni-app中的引用


一、同声翻译插件的申请

小程序开发者官网:微信公众平台

uniapp 语音转文字,uni-app,前端,小程序

 uniapp 语音转文字,uni-app,前端,小程序

 uniapp 语音转文字,uni-app,前端,小程序

uniapp 语音转文字,uni-app,前端,小程序

 uniapp 语音转文字,uni-app,前端,小程序

 uniapp 语音转文字,uni-app,前端,小程序

 点击小程序管理后台后,再次点击设置,选中第三方服务

uniapp 语音转文字,uni-app,前端,小程序

 搜索同声传译,将插件添加至自己的小程序服务中

uniapp 语音转文字,uni-app,前端,小程序 点击详情可看到官方文档及AppId(后续使用中会用到)

二、uni-app中的引用

uniapp 语音转文字,uni-app,前端,小程序

新建项目后,选中manifest.json文件,切换至源码视图(右侧菜单栏最下方!)

uniapp 语音转文字,uni-app,前端,小程序 在mp--weixin的appid(千万别看错了,上方还有一个AppID)同级下写插件的相关信息

"mp-weixin": {
		/* 小程序特有相关 */
		"appid": "你自己的小程序id",
		"plugins": {
			"WechatSI": {
				"version": "0.3.3",
				"provider": "wx069ba97219f66d99"
			}
		},
		"setting": {
			"urlCheck": false
		},
		"usingComponents": true
	},

特别注意!!!!!!!!!!version版本最好是0.3.3,高于此版本可能会无法使用,并且provider应该都是这个,所以复制即用!

<template>
	<view>
		<!-- 语音识别区 -->
		<!-- 语音内容图片+转文字,没有语音时是隐藏状态 -->
		<view class="content" v-if="shows">
			<!-- 语音声纹图片 -->
			<view class="tet" style="position: relative;">
				<view style="position: absolute;width: 30px;height: 30px;background-color: #e9c2db;right: 0;border-radius: 50%;top: 10px;" :class="num == 1 ? '' : 'op'">
					<!-- 转文字按钮  fanyi为转译事件 -->
					<image style="width: 30px;height: 30px;" src="https://pic.imgdb.cn/item/64c85b431ddac507cc0e7284.png" @tap="fanyi"></image>
				</view>
			</view>
			<!-- 翻译内容点击fanyi后出现 -->
			<view class="voicepad" style="margin-top: 20px;width: 94%;margin-left: 3%;padding: 10px; font-size: 12px;">
				{{endOne}}
			</view>
		</view>
		<!-- 语音音阶动画 长按说话时的动画 -->
		<view class="prompt" v-if="animation">
			<section class="dots-container">
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
			</section>
			<text>录音中...</text>
		</view>
		<!-- 按钮功能区 -->
		<view class="action" v-show="!shows">
			<!-- 开始录音按钮  长按录音  松手上传 text为-----开始录音----上传录音文字 -->
			<button @longpress="startRecord" @touchend="endRecord" @tap="startRecord">{{text}}</button>
		</view>
		<view class="actioning" v-show="shows">
			<button @tap="playVoice" style="background-color: #d1f2d7;color: #18bc37;">播放录音</button>
			<button @tap="resetVoice" style="background-color: #fdedd9;color: #f3a73f;">重置录音</button>
		</view>

	</view>
</template>
<script>
	// 录音播放事件引入
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	// 翻译事件引入
	var plugin = requirePlugin("WechatSI")
	let manager = plugin.getRecordRecognitionManager()

	export default {
		data() {
			return {
				text: '开始录音',
				voicePath: '',
				// 音频展示
				shows: false,
				// 动画状态
				animation: false,
				voiceState: "点击录音进行翻译",
				endOne: '',
				num: 1

			}
		},
		onShow() {

		},
		onLoad() {
			// 初始化调用
			this.initRecord();
		},
		methods: {
			startRecord() {
				console.log('开始录音');
				manager.start({
					duration: 30000,
					lang: "zh_CN"
				})
				this.text = '松手上传';
				this.animation = true
			},
			endRecord() {
				console.log('录音结束');
				this.text = '开始录音';
				this.animation = false
				this.shows = true
				manager.stop();
			},
			playVoice() {
				console.log('播放录音');
				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			},
			resetVoice() {
				console.log('重置录音');
				innerAudioContext.stop();
				this.shows = false
				this.voicePath = '';
				this.endOne = ''
				this.voiceState = ''
				this.num = 1
			},
			fanyi() {
				if (this.num == 1) {
					console.log(this.voicePath);
					this.endOne = this.voiceState
					this.num = this.num + 1
					uni.showToast({
						title: '转换成功',
						icon: 'success',
						duration: 2000, //持续时间为 2秒
					})
				}else{
					uni.showToast({
						title: '文字已翻译,请勿重复点击',
						icon: 'error',
						duration: 2000, //持续时间为 2秒
					})
				}
			},
			/**
			 * 初始化语音识别回调  
			 * 绑定语音播放开始事件  
			 */
			initRecord: function() {
				manager.onStart = function(res) {
					this.voiceState = "onStart:" + res.msg + "正在录音"
				};
				//有新的识别内容返回,则会调用此事件  
				manager.onRecognize = (res) => {
					this.voiceState = res.result;
				}
				// 识别结束事件  
				manager.onStop = (res) => {
					this.voicePath = res.tempFilePath;
					this.voiceState = res.result;
					if (this.voiceState == '') {
						console.log('没有说话')
						this.endOne = '周围太安静啦~再试试~';
					}
				}

				// 识别错误事件  
				manager.onError = (res) => {
					this.voiceState = '翻译员去吃饭啦,等下再试试';
					this.shows = false
					uni.showToast({
						title: '翻译员去吃饭啦,等下再试试',
						icon: 'error',
						duration: 2000, //持续时间为 2秒
					})
				}
			},
		}
	}
</script>
<style>
	.content {
		box-sizing: border-box;
		width: 98%;
		margin-left: 1%;
		min-height: 300px;
		padding-top: 20px;
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tet {
		width: 100%;
		height: 50px;
		margin-top: 25px;
		border-radius: 30px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url('https://pic.imgdb.cn/item/64c85a901ddac507cc0d52a4.png');
		position: relative;
	}

	.action {
		position: fixed;
		bottom: 20px;
		width: 100%;
	}

	.action button {
		background-color: #d1f2d7;
		color: #18bc37;
		font-size: 14px;
		display: flex;
		height: 40px;
		width: 96%;
		margin-left: 2%;
		align-items: center;
		justify-content: center;
	}

	.actioning {
		position: fixed;
		bottom: 20px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.actioning button {
		height: 40px;
		width: 45%;
		border: 0;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bbig {
		width: 94%;
	}
	
	.op{
		visibility: hidden;
	}
	/* 动画 */
	.prompt {
		width: 100%;
		height: 80px;
		position: fixed;
		bottom: 70px;
	}

	.prompt text {
		position: absolute;
		bottom: 2px;
		color: #f3a73f;
		left: calc(45%);
		animation: puls 1.5s infinite ease-in-out;
	}

	.dots-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80px;
		width: 45%;
		position: absolute;
		bottom: 0px;
		left: calc(27.5%);
		background-color: #fdedd9;
		border-radius: 20px;
	}

	.dot {
		height: 16px;
		width: 16px;
		margin-right: 10px;
		border-radius: 10px;
		background-color: #f3a73f;
		animation: pulse 1.5s infinite ease-in-out;
	}

	.dot:last-child {
		margin-right: 0;
	}

	.dot:nth-child(1) {
		animation-delay: -0.3s;
	}

	.dot:nth-child(2) {
		animation-delay: -0.1s;
	}

	.dot:nth-child(3) {
		animation-delay: 0.1s;
	}

	@keyframes pulse {
		0% {
			transform: scale(0.8);
			background-color: #f3a73f;
			box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7);
		}

		50% {
			transform: scale(1.2);
			background-color: #f9d39f;
			box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
		}

		100% {
			transform: scale(0.8);
			background-color: #f3a73f;
			box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7);
		}
	}

	@keyframes puls {
		0% {
			transform: translateY(0px)
		}

		50% {
			transform: translateY(-4px)
		}

		100% {
			transform: translateY(0px)
		}
	}
</style>

至此同声翻译就可以使用了,本文主要使用的是录音完毕后,提供播放录音及翻译录音两个选项,也可以改动后支持同声同步翻译。

demo复制即可使用,只需要修改图片,如果真机运行报错,建议切换真机1.0进行测试。文章来源地址https://www.toymoban.com/news/detail-841911.html

到了这里,关于uni-app语音转文字功能demo(小程序同声翻译开箱即用)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序中使用微信同声传译插件实现语音识别、语音合成、文本翻译功能----语音识别(一)

    官方文档链接:https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx069ba97219f66d99token=370941954lang=zh_CN#- 要使用插件需要先在小程序管理后台的 设置-第三方设置-插件管理 中添加插件,目前该插件仅认证后的小程序。 提供语音的实时流式识别能力,通过获取全局唯一的语音识别管理器rec

    2024年01月19日
    浏览(135)
  • 小程序中使用微信同声传译插件实现语音识别、语音合成、文本翻译功能----语音合成(二)

    官方文档链接:https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx069ba97219f66d99token=370941954lang=zh_CN#- 要使用插件需要先在小程序管理后台的 设置-第三方设置-插件管理 中添加插件,目前该插件仅认证后的小程序。 语音合成支持的语言有 zh_CN(中国大陆),en_US(英文)。 参数说明: 1、

    2024年01月16日
    浏览(122)
  • 关于小程序uniapp同声传译(语音转文字)

    1. 首先我们先在开发者工具给他添加第三方插件 然后我们在 小程序的manifest.json切换成源码视图 然后在appid同级目录添加插件 其中provider是第三方插件的appid 然后在你要进行翻译的文件里面引入    

    2024年02月15日
    浏览(48)
  • uni-app(微信小程序)图片旋转放缩,文字绘制、海报绘制

    总结一下: 要进行海报绘制离不开canvas,我们是先进行图片,文字的拖拽、旋转等操作 最后再对canvas进行绘制,完成海报绘制。 背景区域设置为 position: relative,方便图片在当前区域中拖动等处理。 添加图片,监听图片在背景区域下的 touchstart touchmove touchend 事件 拖动图片,

    2024年02月09日
    浏览(65)
  • 【uni-app】uni-app实现聊天页面功能(小程序)——布局篇

    在工作中使用uni-app参与开发一个小程序,其中要写一个简单的聊天页面,虽然功能不多(只有一个发送文字的功能),但是其中的细节比较多,也踩过很多坑,特此记录下来。要实现的页面如图所示,该篇主要讲讲如何布局(参考了很多文章之后根据页面需求进行一个整合)

    2024年02月05日
    浏览(91)
  • 微信小程序 -- 获取语音,并将语音转为文字(插件:微信同声传译)

     实现的功能是获取语音,并将语音转为文字,实现效果如下:                 1. 小程序后台添加插件:微信同声传译 登录小程序后台:https://mp.weixin.qq.com 11. 设置 - 第三方设置 - 添加插件 12. 输入“微信同声传译”,点击搜索,之后选择并点击添加  13. 成功添加后,

    2024年02月06日
    浏览(61)
  • 【uniapp开发小程序】实现同声传译(长按语音转文字)

    效果图:  插件: 采用小程序插件:微信同声传译。插件文档定位 具体步骤: 先登录小程序后台(项目别错了):官网传送 然后 设置 = 第三方设置 = 添加插件  在插件文档里面拿到Appid和版本号 在manifest.json切换成源码视图 然后在appid同级目录添加插件  然后就是引用插件

    2024年02月07日
    浏览(60)
  • uni-app小程序分享功能实现

    通过onShareAppMessage(OBJECT) 将小程序到分享微信聊天,onShareTimeline()将小程序分享到朋友圈。 api中的参数配置参考文档:https://uniapp.dcloud.net.cn/api/plugins/share.html#onshareappmessage 分为全局引入、单页面引两种方式 全局引入只需要在小程序main.js中引入一次,可以复用,便于维护; 单

    2024年02月05日
    浏览(96)
  • uni-app开发 小程序直播功能

    1、微信后台申请插件开通 2、微信后台开通直播功能 3、代码中接入直播插件AppID 4、【直播组件】如何使用 5、直播组将状态获取 微信开发直播功能,需要企业账号; 需要申请直播功能和插件 1、微信后台申请插件开通 微信后台 登录微信后台 点击设置中的第三方设置 — 添

    2024年02月05日
    浏览(55)
  • uni-app小程序中实现分享功能

    1、在manifest.json文件中配置分享相关信息,包括分享标题、分享图片等。 代码如下: 2、在需要触发分享的页面中,使用uni.navigateToMiniProgram()方法打开分享页面。  3、在被分享的小程序中,可以通过wx.getLaunchOptionsSync()获取到分享时携带的额外数据。  

    2024年02月08日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包