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

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

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

微信公众平台

image.png

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

在文件中开始引用:

注意!!在这个源码视图中开始引入插件!! 在小程序相关插件中引入 版本要是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 = true
        manager.start({
                    //指定录音的时长,单位ms,最大为60000
          duration: 60000,
                    //识别的语言,目前支持zh_CN en_US zh_HK
          lang: "zh_CN"
        });
      },
      touchEnd() {
        uni.showToast({
          title: '录音完成',
          icon: "none"
        })
        this.isShow = false
        manager.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>
相关实践学习
达摩院智能语音交互 - 声纹识别技术
声纹识别是基于每个发音人的发音器官构造不同,识别当前发音人的身份。按照任务具体分为两种: 声纹辨认:从说话人集合中判别出测试语音所属的说话人,为多选一的问题 声纹确认:判断测试语音是否由目标说话人所说,是二选一的问题(是或者不是) 按照应用具体分为两种: 文本相关:要求使用者重复指定的话语,通常包含与训练信息相同的文本(精度较高,适合当前应用模式) 文本无关:对使用者发音内容和语言没有要求,受信道环境影响比较大,精度不高 本课程主要介绍声纹识别的原型技术、系统架构及应用案例等。 讲师介绍: 郑斯奇,达摩院算法专家,毕业于美国哈佛大学,研究方向包括声纹识别、性别、年龄、语种识别等。致力于推动端侧声纹与个性化技术的研究和大规模应用。
相关文章
|
9天前
|
Web App开发 前端开发 安全
语音交友app系统源码功能及技术研发流程剖析
语音交友App核心功能包括语音聊天(一对一、群聊、语音消息)、语音房间(直播、主题房、管理)、社交互动(好友、关注、打赏)、内容发现、音效美化、通知提醒及安全隐私等。开发流程涵盖需求分析、技术选型(前端、后端、数据库、实时通信)、UI/UX设计、前后端开发、实时通信集成、音效处理、测试优化、部署上线及运营维护,确保稳定高效运行并持续优化用户体验。
|
2月前
|
安全 定位技术 API
婚恋交友系统匹配功能 婚恋相亲软件实现定位 语音社交app红娘系统集成高德地图SDK
在婚恋交友系统中集成高德地图,可实现用户定位、导航及基于地理位置的匹配推荐等功能。具体步骤如下: 1. **注册账号**:访问高德开放平台,注册并创建应用。 2. **获取API Key**:记录API Key以备开发使用。 3. **集成SDK**:根据开发平台下载并集成高德地图SDK。 4. **配置功能**:实现定位、导航及基于位置的匹配推荐。 5. **注意事项**:保护用户隐私,确保API Key安全,定期更新地图数据,添加错误处理机制。 6. **测试优化**:完成集成后进行全面测试,并根据反馈优化功能。 通过以上步骤,提升用户体验,提供更便捷的服务。
|
7天前
|
开发框架 缓存 搜索推荐
PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
嗨,大家好,我是小华同学。PiliPala 是一个基于 Flutter 开发的 BiliBili 第三方客户端,提供流畅、个性化的使用体验。核心功能包括视频浏览与推荐、用户互动、丰富的播放设置、多维度搜索和个性化主题等。相比官方客户端,PiliPala 功能更丰富、性能更优、界面更美观。
57 14
|
4月前
|
移动开发 开发框架 小程序
uni-app:demo&媒体文件&配置全局的变量(三)
uni-app 是一个使用 Vue.js 构建多平台应用的框架,支持微信小程序、支付宝小程序、H5 和 App 等平台。本文档介绍了 uni-app 的基本用法,包括登录示例、媒体文件处理、全局变量配置和 Vuex 状态管理的实现。通过这些示例,开发者可以快速上手并高效开发多平台应用。
119 0
|
24天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
25 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
30天前
|
移动开发 监控 小程序
TP6+Uni-app框架开发,2025年最新圈子系统功能展示,圈子app流量主模式
圈子系统基于TP6+Uni-app框架开发,支持多端账号同步并可快速生成APP。它适用于行业、地方、社交、游戏、兴趣等多种圈子场景,提供广告展示、商品销售、推广结算、交易佣金、入驻费用、会员增值及线上线下活动等多元盈利模式,帮助商户精准定位用户,实现流量变现和业务增长。
|
2月前
|
PHP
全新uniapp小说漫画APP小说源码/会员阅读/月票功能
价值980的uniapp小说漫画APP小说源码/会员阅读/月票功能
128 20
|
2月前
|
前端开发 数据库 UED
uniapp开发,前后端分离的陪玩系统优势,陪玩app功能特点,线上聊天线下陪玩,只要4800
前后端分离的陪玩系统将前端(用户界面)和后端(服务器逻辑)分开开发,前者负责页面渲染与用户交互,后者处理数据并提供接口。该架构提高开发效率、优化用户体验、增强可扩展性和稳定性,降低维护成本,提升安全性。玩家可发布陪玩需求,陪玩人员发布服务信息,支持在线聊天、预约及线下陪玩功能,满足多样化需求。[演示链接](https://www.51duoke.cn/games/?id=7)
|
2月前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
167 4
|
2月前
|
小程序 安全 网络安全
清晰易懂!陪玩系统源码搭建的核心功能,陪玩小程序、陪玩app的搭建步骤!
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    微信小程序 app.json 配置文件解析与应用
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 6
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 7
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作