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>
相关实践学习
达摩院智能语音交互 - 声纹识别技术
声纹识别是基于每个发音人的发音器官构造不同,识别当前发音人的身份。按照任务具体分为两种: 声纹辨认:从说话人集合中判别出测试语音所属的说话人,为多选一的问题 声纹确认:判断测试语音是否由目标说话人所说,是二选一的问题(是或者不是) 按照应用具体分为两种: 文本相关:要求使用者重复指定的话语,通常包含与训练信息相同的文本(精度较高,适合当前应用模式) 文本无关:对使用者发音内容和语言没有要求,受信道环境影响比较大,精度不高 本课程主要介绍声纹识别的原型技术、系统架构及应用案例等。 讲师介绍: 郑斯奇,达摩院算法专家,毕业于美国哈佛大学,研究方向包括声纹识别、性别、年龄、语种识别等。致力于推动端侧声纹与个性化技术的研究和大规模应用。
相关文章
|
21天前
|
小程序 视频直播 数据安全/隐私保护
如何在1v1视频直播交友APP中实现防录屏防截屏功能?
婚恋交友市场快速增长,1v1社交应用海外投放增86.49%,中东、东南亚及北美需求旺盛。用户偏好私密高效交流,国内“云相亲”兴起。开发需合规备案、实名认证,并防范诈骗。本文详解原生APP防录屏技术:Android通过MediaProjection检测,iOS监听UIScreen状态,结合动态水印、远程销毁等增强防护,平衡体验与安全。
|
1月前
|
JavaScript API 开发工具
如何在原生App中调用Uniapp的原生功能?
如何在原生App中调用Uniapp的原生功能?
459 139
|
2月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
118 0
|
1月前
|
存储 自然语言处理 算法
参照Yalla、Hawa等主流APP核心功能,开发一款受欢迎的海外语聊需要从哪些方面入手
海外语聊APP开发需结合Yalla、Hawa等主流产品,聚焦多语言支持、实时音视频、社交互动与安全合规。兼顾技术架构、本地化运营与法律风险,避免劣质成品代码,平衡创新与成本,打造差异化出海产品。(239字)
|
3月前
|
存储 Java PHP
轻量化短视频电商直播带货APP源码全解析:核心功能与设计流程​
在电商直播热潮下,开发专属直播带货APP成为抢占市场关键。本文详解原生开发轻量化APP的核心功能与全流程设计,涵盖用户登录、商品浏览、直播互动、购物车、订单及售后功能,并介绍安卓端Java、苹果端Object-C、后台PHP的技术实现,助力打造高效优质的直播电商平台。
|
8月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
411 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
5月前
|
数据库
《仿盒马》app开发技术分享-- 回收订单页功能完善(45)
上一节我们实现了订单的待取件、已取消状态展示,并且成功实现了修改订单状态后的列表刷新,实现了云端数据的修改,这一节我们来实现订单页剩下的两个板块的业务逻辑,分别是运输中、已完成状态下的列表展示以及订单状态的修改
113 1
|
4月前
|
存储 移动开发 监控
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
App Trace系统通过一键拉起、快速安装和免提写邀请码三大功能,显著提升用户转化率、安装成功率和邀请注册率。结合深度技术实现与优化,助力公司用户增长,成为移动端核心基础设施。
|
5月前
|
UED
《仿盒马》app开发技术分享-- 扫一扫功能(35)
随着app的逐渐完善,我们现在需要在细节处做更多的打磨,在首页我们添加了很多静态的按钮和组件,现在我们开始对这些组件进行功能的添加,这次首先实现的是首页头部的扫一扫功能,扫一扫我们实现扫码后跳转商品详情页
123 0
|
5月前
|
存储 数据库
《仿盒马》app开发技术分享-- 购物车功能完善(14)
上一节我们实现了购物车商品列表的状态切换,已添加商品数量的增减,已添加商品滑动删除,已添加商品在选中情况下的价格计算。这一节我们在这些功能的基础上实现云端记录,因为我们现在只有数据的查询是从云端获取的,其他的操作虽然都实现了相对应的功能,但是当我们操作完,关闭app,再打开不会有对应的记录,有的同学可能会说,那我们把数据用首选项或者数据库的形式存储就可以了吧? 那如果我更换了另一个设备那这些添加的数据是不是就又不能使用了?所以我们的每个操作,最好都是提交到云端,这样我们在其他设备,在退出应用,切换账号这些情况下都能很好的保存我们操作后的购物车状态。
108 0

热门文章

最新文章