微信小程序 -- 获取语音,并将语音转为文字(插件:微信同声传译)

news/2024/10/17 14:25:07/

 实现的功能是获取语音,并将语音转为文字,实现效果如下:

               

1. 小程序后台添加插件:微信同声传译
登录小程序后台:https://mp.weixin.qq.com

11. 设置 -> 第三方设置 -> 添加插件

12. 输入“微信同声传译”,点击搜索,之后选择并点击添加

 13. 成功添加后,点击详情

  14. 复制它的AppID和最新版本号(后序有用)。

2. 配置
去app.json进行配置

其中,version的值对应上面的版本号,provider的值对应上面的AppID

"plugins": {
    "WechatSI": {
      "version": "0.3.0",
      "provider": "wx069ba97219f66d99"
    }
},
3. 代码实现
31. wxml代码

<view class="yuyinWrap">
  <textarea class='yuyinCon' placeholder='请输入内容' value='{{content}}'></textarea>
  <!--  -->
  <view class=''>
    <button class="yuyinBtn {{recordState == true ? 'yuyinBtnBg':''}}" bindtouchstart="touchStart" bindtouchend="touchEnd">
      <text wx:if="{{recordState == false}}">按住 说话</text>
      <text wx:else>松开 结束</text>
    </button>
  </view>
  <!-- 开始语音 弹出语音图标表示正在录音 -->
  <cover-view class="startYuyinImage" wx:if="{{recordState == true}}">
    <cover-image src="../resource/image/yuyin-min.png"></cover-image>
    <cover-view>开始语音</cover-view>
  </cover-view>
</view>
效果如下:

32. js 实现代码

实现了textarea可以手动输入,也可以语音转为文字填入。代码解析看注释。

具体可以看官网:https://developers.weixin.qq.com/miniprogram/dev/extended/service/translator.html

const app = getApp();
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();
 
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    //语音
    recordState: false, //录音状态
    content:'',//内容
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //识别语音
    this.initRecord();
  },
  // 手动输入内容
  conInput: function (e) {
    this.setData({
      content:e.detail.value,
    })
  },
  //识别语音 -- 初始化
  initRecord: function () {
    const that = this;
    // 有新的识别内容返回,则会调用此事件
    manager.onRecognize = function (res) {
      console.log(res)
    }
    // 正常开始录音识别时会调用此事件
    manager.onStart = function (res) {
      console.log("成功开始录音识别", res)
    }
    // 识别错误事件
    manager.onError = function (res) {
      console.error("error msg", res)
    }
    //识别结束事件
    manager.onStop = function (res) {
      console.log('..............结束录音')
      console.log('录音临时文件地址 -->' + res.tempFilePath); 
      console.log('录音总时长 -->' + res.duration + 'ms'); 
      console.log('文件大小 --> ' + res.fileSize + 'B');
      console.log('语音内容 --> ' + res.result);
      if (res.result == '') {
        wx.showModal({
          title: '提示',
          content: '听不清楚,请重新说一遍!',
          showCancel: false,
          success: function (res) {}
        })
        return;
      }
      var text = that.data.content + res.result;
      that.setData({
        content: text
      })
    }
  },
  //语音  --按住说话
  touchStart: function (e) {
    this.setData({
      recordState: true  //录音状态
    })
    // 语音开始识别
    manager.start({
      lang: 'zh_CN',// 识别的语言,目前支持zh_CN en_US zh_HK sichuanhua
    })
  },
  //语音  --松开结束
  touchEnd: function (e) {
    this.setData({
      recordState: false
    })
    // 语音结束识别
    manager.stop();
  },
})
注意:测试时,在微信开发者工具无效果,要预览或者真机调试下,手机进行测试。 


————————————————
版权声明:本文为CSDN博主「星星之火M」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41638795/article/details/98080498


http://www.ppmy.cn/news/104064.html

相关文章

ASEMI单向可控硅BT151参数,BT151封装,BT151体积

编辑-Z 单向可控硅BT151参数&#xff1a; 型号&#xff1a;BT151 存储接点温度范围Tstg&#xff1a;-40~150℃ 工作接点温度范围Tj&#xff1a;-40~125℃ 断态重复峰值电压VDRM&#xff1a;650V 重复峰值反向电压VRRM&#xff1a;650V RMS导通电流IT(RMS)&#xff1a;12…

【源码解析】Spring Bean生命周期源码解析

Spring启动核心 AbstractApplicationContext#refresh&#xff0c;Spring刷新容器的核心方法。最关键的就是 AbstractApplicationContext#invokeBeanFactoryPostProcessors&#xff0c;扫描BeanAbstractApplicationContext#finishBeanFactoryInitialization&#xff0c;生成Be…

基于ChatGPT的对话生成

一、ChatGPT的对话生成 1、模型架构 ChatGPT是一种基于Transformer的神经网络模型&#xff0c;可以对输入序列和输出序列进行关注&#xff0c;并输出与输入序列相似的文本序列。在对话生成领域&#xff0c;ChatGPT模型的输入是一个由若干对话历史和当前问题组成的文本序列&am…

第一部分-基础篇-第二章:PSTN、PBX及呼叫中心业务

文章目录 序言上一篇文章&#xff1a;2.1 PSTN业务2.1.1 POTS2.1.2 商务业务2.1.3 其他增值业务 2.2 PBX业务2.2.1 呼叫转移2.2.2 同组代答 2.3 PBX与中继线2.4 IP-PBX业务2.5 呼叫中心2.5.1 什么是呼叫中心2.5.2 呼叫中心的历史2.5.3 呼叫中心的分类1.交换机类型的呼叫中心2.板…

前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,Webpack 汇总篇)-- 持续更新

前端面试题汇总大全&#xff08;含答案超详细&#xff0c;HTML,JS,CSS汇总篇&#xff09;-- 持续更新 前端面试题汇总二 五、Vue 篇1. 谈谈你对MVVM开发模式的理解&#xff1f;2. v-if 和 v-show 有什么区别&#xff1f;3. r o u t e 和 route和 route和router区别4.vue自定义…

MySQL-3-创建表、删除表、增删改、约束、索引

一、创建表 语法格式&#xff1a; create table <表名>( 字段名1 数据类型&#xff0c; 字段名2 数据类型&#xff0c; … ); 补充&#xff1a;MySQL中常见的数据类型 int 整数&#xff08;对应Java中的int&#xff09; bigint 长整型&#xff08;对应Java中的long&#…

Vue3 项目相关

vite 项目起步式 npm create vite - 1.命名项目名称- 2. 选择技术框架- 3. 进入项目文件夹 npm i 安装依赖&#xff0c;- 4. npm run dev 运行项目配置 package.json 文件 &#xff0c;使项目运行后自动再浏览器中打开。 在 dev 运行命令后添加一个 --open 即可。 "script…

第二届(2023年)中国国际培育钻石产业发展与创新大会盛大召开!

5月25-26日&#xff0c;由广东省商务厅、中国国际贸易促进委员会广东省委员会&#xff08;广东国际商会&#xff09;、广州市商务局、番禺区人民政府、广东省交易控股集团有限公司/广东省公共资源交易中心指导&#xff0c;广州钻石交易中心&#xff08;简称广钻中心&#xff09…