当前位置: 首页 > news >正文

uni-app语音转文字功能demo(同声传译)

目录

首先去微信开发者官网申请一下同声传译的插件  微信公众平台

在文件中开始引用:


首先去微信开发者官网申请一下同声传译的插件  
微信公众平台

后续使用的时候可以看详情里面的信息进行使用

在文件中开始引用:

注意!!在这个源码视图中开始引入插件!! 在小程序相关插件中引入 版本要是0.3.5的 因为版本过高或者过低都会报错!

"mp-weixin" : {"appid" : "自己小程序的id","setting" : {"urlCheck" : false},"plugins" : {"WechatSI" : {"version" : "0.3.5","provider" : "wx069ba97219f66d99"}},

接下来直接上源码 可以根据自己的需求进行修改代码:

代码全部直接放在下方,可以直接拿走用,好用记得点赞收藏!

<template><view><view class="voicepad">{{voiceState}}</view><button class="cu-btn  bg-green voicebtn " @touchstart="touchStart" @touchend="touchEnd"><image src="../../static/logo.png" mode="widthFix" style="width: 50rpx;"></image></button><view class="center" style="background-color: #555555; color: #FFF;" v-show="isShow">正在录音...</view></view>
</template><script>var plugin = requirePlugin("WechatSI")let manager = plugin.getRecordRecognitionManager();export default {data() {return {voiceState: "你可以这样说...",isShow: false}},onShow() {},onLoad() {this.initRecord();},methods: {touchStart() {this.isShow = truemanager.start({//指定录音的时长,单位ms,最大为60000duration: 60000,//识别的语言,目前支持zh_CN en_US zh_HKlang: "zh_CN"});},touchEnd() {uni.showToast({title: '录音完成',icon: "none"})this.isShow = falsemanager.stop();},/**  * 初始化语音识别回调  * 绑定语音播放开始事件  */initRecord() {manager.onStart = (res) => {console.log('start', res.msg);this.voiceState = res.msg;};//有新的识别内容返回,则会调用此事件  manager.onRecognize = (res) => {this.voiceState = res.result;console.log('onRecognize');}// 识别结束事件  manager.onStop = (res) => {this.voiceState = res.result;console.log('onStop', res.result);}// 识别错误事件  manager.onError = (res) => {this.voiceState = res.msg;console.log('onError');}},}}
</script><style>.voicebtn {height: 130upx;display: block;width: 130upx;line-height: 130upx;border-radius: 65upx;font-size: 50upx;position: absolute;top: 1060upx;left: 310upx;}.voicepad {height: 250upx;width: 680upx;background: #fff;margin: 30upx auto;border-radius: 8upx;padding: 20upx;font-size: 35upx;}.center {text-align: center;align-items: center;width: 200rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 20rpx;border-radius: 20rpx;/* 	height: 50rpx; */opacity: 0.8;}
</style>

http://www.lryc.cn/news/157066.html

相关文章:

  • vue2+element-ui批量导入方法并判断上传的文件是否为xls或xlsx
  • 【FPGA】通俗理解从VGA显示到HDMI显示
  • 【SpringMVC】参数传递与用户请求和响应
  • Android图形-Hardware Composer HAL
  • P1093 [NOIP2007 普及组] 奖学金
  • C#模拟PLC设备运行
  • LeetCode 每日一题 2023/8/28-2023/9/3
  • Python Tkinter Multiple Windows 教程
  • 【Arduino24】8*8点阵实验
  • 2023年09月数据库流行度最新排名
  • jenkins快速跑通helloworld任务
  • win10中安装ros
  • 问道管理:光刻胶概念再度活跃,广信材料两连板,蓝英装备等涨停
  • InstructPix2Pix(CVPR2023)-图像编辑论文解读
  • 基于神经网络结合紫外差分光谱的二氧化硫浓度定量预测
  • 一个新工具 nolyfill
  • vue的第2篇 开发环境vscode的安装以及创建项目空间
  • Java之包装类的详细解析
  • SpringBoot项目防止接口重复提交(简单拦截器实现方案)
  • C语言 数据结构与算法 I
  • PHP指定时间戳/日期加一天,一年,一周,一月
  • 前端框架 vue-admin-template的搭建运行
  • Git—版本控制系统
  • 【MySQL基础|第一篇】——谈谈SQL中的DDL语句
  • 移动安全测试框架-MobSF WINDOWS 环境搭建
  • QT连接OpenCV库完成人脸识别
  • 使用 ElasticSearch 作为知识库,存储向量及相似性搜索
  • 视频图像处理算法opencv在esp32及esp32s3上面的移植,也可以移植openmv
  • 2. postgresql并行扫描(1)——pg强制走并行扫描建表及参数配置
  • 【C++】动态内存管理