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>
相关实践学习
达摩院智能语音交互 - 声纹识别技术
声纹识别是基于每个发音人的发音器官构造不同,识别当前发音人的身份。按照任务具体分为两种: 声纹辨认:从说话人集合中判别出测试语音所属的说话人,为多选一的问题 声纹确认:判断测试语音是否由目标说话人所说,是二选一的问题(是或者不是) 按照应用具体分为两种: 文本相关:要求使用者重复指定的话语,通常包含与训练信息相同的文本(精度较高,适合当前应用模式) 文本无关:对使用者发音内容和语言没有要求,受信道环境影响比较大,精度不高 本课程主要介绍声纹识别的原型技术、系统架构及应用案例等。 讲师介绍: 郑斯奇,达摩院算法专家,毕业于美国哈佛大学,研究方向包括声纹识别、性别、年龄、语种识别等。致力于推动端侧声纹与个性化技术的研究和大规模应用。
相关文章
|
2天前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
2月前
|
Java PHP
【应用服务 App Service】 App Service Rewrite 实例 - 反向代理转发功能
【应用服务 App Service】 App Service Rewrite 实例 - 反向代理转发功能
【应用服务 App Service】 App Service Rewrite 实例 - 反向代理转发功能
|
2月前
|
Web App开发 Android开发
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
实时数据传输在互联网中至关重要,不仅支持即时通讯如QQ、微信的文字与图片传输,还包括音视频通信。一对一通信常采用WebRTC技术,如《Android Studio开发实战》中的App集成示例;而一对多的在线直播则需部署独立的流媒体服务器,使用如SRT等协议。SRT因其优越的直播质量正逐渐成为主流。本文档概述了SRT协议的使用,包括通过OBS Studio和SRT Streamer进行SRT直播推流的方法,并展示了推流与拉流的成功实例。更多细节参见《FFmpeg开发实战》一书。
42 1
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
|
2月前
|
Python
【Azure 应用服务】App Service的运行状况检查功能失效,一直提示"实例运行不正常"
【Azure 应用服务】App Service的运行状况检查功能失效,一直提示"实例运行不正常"
|
4月前
|
开发框架 移动开发 JavaScript
SpringCloud微服务实战——搭建企业级开发框架(四十七):【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能
在uni-app中,使用axios实现网络请求和登录功能涉及以下几个关键步骤: 1. **安装axios和axios-auth-refresh**: 在项目的`package.json`中添加axios和axios-auth-refresh依赖,可以通过HBuilderX的终端窗口运行`yarn add axios axios-auth-refresh`命令来安装。 2. **配置自定义常量**: 创建`project.config.js`文件,配置全局常量,如API基础URL、TenantId、APP_CLIENT_ID和APP_CLIENT_SECRET等。
206 60
|
2月前
|
测试技术
一款功能完善的智能匹配1V1视频聊天App应该通过的测试CASE
文章列举了一系列针对1V1视频聊天App的测试用例,包括UI样式、权限请求、登录流程、匹配逻辑、消息处理、充值功能等多个方面的测试点,并标注了每个测试用例的执行状态,如通过(PASS)、失败(FAIL)或需要进一步处理(延期修改、待定、方案再定等)。
39 0
|
2月前
|
Linux C++ Docker
【Azure 应用服务】App Service for Linux 中实现 WebSocket 功能 (Python SocketIO)
【Azure 应用服务】App Service for Linux 中实现 WebSocket 功能 (Python SocketIO)
|
2月前
|
监控 安全 前端开发
【Azure 应用服务】App Service 运行状况健康检查功能简介 (Health check)
【Azure 应用服务】App Service 运行状况健康检查功能简介 (Health check)
|
2月前
|
Java Spring
【Azure 应用服务】记一次Azure Spring Cloud 的部署错误 (az spring-cloud app deploy -g dev -s testdemo -n demo -p ./hellospring-0.0.1-SNAPSHOT.jar --->>> Failed to wait for deployment instances to be ready)
【Azure 应用服务】记一次Azure Spring Cloud 的部署错误 (az spring-cloud app deploy -g dev -s testdemo -n demo -p ./hellospring-0.0.1-SNAPSHOT.jar --->>> Failed to wait for deployment instances to be ready)
|
3月前
|
存储 前端开发 测试技术
同城交友APP系统开发运营版/案例详细/功能步骤/逻辑方案
开发一款同城交友APP系统需要经过以下大致流程: