首页 > 编程语言 >微信同声传译小程序插件使用教程

微信同声传译小程序插件使用教程

时间:2024-06-16 21:01:46浏览次数:14  
标签:插件 微信 翻译 传译 语音 text

微信同声传译小程序插件 —— 机器翻译、智能语音

案例可搜索“一起学英语鸭”小程序查看,  实现效果如下图:

插件功能

  • 语音转文字

  • 语音合成

  • 文本翻译

 

step 1:添加插件

在使用前,需要登录官网 设置 → 第三方服务 → 添加插件

搜索 【微信同声传译】并添加

在需要使用插件的小程序 app.json 中指明需要使用的插件版本等信息

// app.json
{
  ...
  "plugins": {
    ...
    "WechatSI": {
      "version": "0.0.6",
      "provider": "wx069ba97219f66d99"
  }
}

接下来,在index.js引入插件,获取全局唯一的语音识别管理器recordRecoManager

// index.js
const plugin = requirePlugin("WechatSI")
const manager = plugin.getRecordRecognitionManager()

step 2:语音输入

希望做到的效果是按住某个按钮,开始识别语音,松开按钮就结束识别


<view  catchtouchstart="streamRecord" catchtouchend="endStreamRecord">中文view>

// index.js
Page({
  data: {},
  streamRecord: function() {
    manager.start({
      lang: 'zh_CN',
    })
  },
  streamRecordEnd: function() {
    manager.stop()
  }
})

step 3:绑定录音回调事件


<view>语音识别内容:{{currentText}}view>

// page.js
Page({
  data: {
    currentText: '',
  },
  initRecord: function() {
    //有新的识别内容返回,则会调用此事件
    manager.onRecognize = (res) => {
      let text = res.result
      this.setData({
        currentText: text,
      })
    }
    // 识别结束事件
    manager.onStop = (res) => {
      let text = res.result
      if(text == '') {
        // 用户没有说话,可以做一下提示处理...
        return
      }
      this.setData({
        currentText: text,
      })
      // 得到完整识别内容就可以去翻译了
      this.translateTextAction()
    }
  },
  translateTextAction: function() {},
  onLoad: function() {
    this.initRecord()
  }
})

step 4:文本翻译


<view>翻译结果:{{translateText}}view>

// page.js
Page({
  data: {
    currentText: '',
    translateText: '',
  },
  translateTextAction: function() {
    let lfrom =  'zh_CN'
    let lto = 'en_US'
    plugin.translate({
      lfrom: lfrom,
      lto: lto,
      content: this.data.currentText,
      tts: true, // 需要合成语音
      success: (resTrans)=>{
        // 翻译可以得到 翻译文本,翻译文本的合成语音,合成语音的过期时间
        let text = resTrans.result
        this.setData({
          translateText: text,
        })
        // 得到合成语音让它自动播放出来
        wx.playBackgroundAudio({
          dataUrl: resTrans.filename,
          title: '',
        })
      },
    })
  },
})

step 5:语音合成

plugin.translate得到的语音文件是有过期时间,可以download到本地使用。

如果像面对面翻译一样需要存比较多历史记录的话,也可以选择过期之后调用plugin.textToSpeech接口再去重新合成一次。

  plugin.textToSpeech({
    lang: 'zh_CN',
    content: '我想重新进行语音合成',
    success: resTrans => {
      // 可以重新得到语音合成文件和过期时间
    },
})

面对面翻译小程序

面对面翻译小程序是微信团队针对中英文面对面沟通的场景开发的流式语音翻译小程序,基于微信同声传译插件封装实现,提供了中英文语音识别,文本翻译等功能。

预览

下载与使用

  1. 克隆代码
  2. project.config.json 中的 appid 替换成在公众平台申请的项目 id
  3. 公众平台 → 设置 → 第三方服务 → 插件管理 中 添加微信同声传译插件 (wx069ba97219f66d99)
  4. 打开微信开发者工具中添加项目

微信版本要求

基础库版本 >= 1.9.94

  • 使用插件,需要基础库版本 >= 1.9.6
  • 插件内调用wx.getRecorderManager接口,需要基础库版本 >= 1.9.94

微信同声传译插件支持功能

  • 语音识别 (目前支持 zh_CN(中国大陆), en_US(英语))
  • 文本翻译 (目前支持 zh_CN(中国大陆),  en_US(英语))
  • 语音合成 (目前支持 zh_CN(中国大陆),  en_US(英语))

标签:插件,微信,翻译,传译,语音,text
From: https://blog.csdn.net/lilihexiaoxiangege/article/details/139726154

相关文章

  • 微信阅读网站小程序(30029)
     有需要的同学,源代码和配套文档领取,加文章最下方的名片哦一、项目演示项目演示视频二、资料介绍完整源代码(前后端源代码+SQL脚本)配套文档(LW+PPT+开题报告)远程调试控屏包运行三、技术介绍Java语言SSM框架SpringBoot框架Vue框架JSP页面Mysql数据库IDEA/Eclipse开发四、项......
  • mybatis plus 启用 mybatis插件
      mybatisplus启用mybatis插件在使用MyBatis-Plus时,要启用MyBatis插件,你需要遵循以下步骤:实现自定义插件:创建一个类,实现Interceptor接口。注册插件:在MyBatis配置文件中或通过Java配置方式注册插件。下面是一个简单的自定义MyBatis插件示例:imp......
  • Android Media Framework(六)插件式编程与OMXStore
    必读:AndroidMediaFramework-开篇OpenMAXILSpec阅读到上一节就结束了,这一节开始正式进入到Framework阅读阶段,我们将了解OpenMAX框架是如何与AndroidFramework连接的。1、插件式编程插件式编程(Plugin-basedProgramming)是一种软件开发模式,它允许开发者通过编写独立的、......
  • Android Media Framework(六)插件式编程与OMXStore
    OpenMAXILSpec阅读到上一节就结束了,这一节开始正式进入到Framework阅读阶段,我们将了解OpenMAX框架是如何与AndroidFramework连接的。1、插件式编程插件式编程(Plugin-basedProgramming)是一种软件开发模式,它允许开发者通过编写独立的、可插拔的模块(称为插件)来扩展应用......
  • 【计算机毕业设计】240基于微信小程序的校园综合服务平台
    ......
  • 【计算机毕业设计】241外卖微信小程序
    ......
  • 微信小程序
    环境搭建官网地址https://mp.weixin.qq.com/游客登录,本地开发没问题,发布和支付等功能无法使用。注册小程序账号,后期发布代码等需要使用。个人版小程序企业版小程序(建议)目录文件├──pages 【页面文件目录】│  ├──index 【页面】│  │  ......
  • 本地搭建halo模板和插件开发简要步骤
    1.新建local配置文件,加载本地插件工程目录halo:plugin:runtime-mode:developmentfixed-plugin-path:#配置为插件绝对路径#-D:\myproject\hellodev\plugin-ylpro-D:\myproject\hellodev\plugin-links2.插件工程编写好处理模板的代码3.编......
  • unicloud持久化小程序获取的临时微信头像url路径(教程)
    自2022年10月25日后,用户头像昵称获取规则作了调整:getUserInfo接口获取用户头像将统一返回默认灰色头像,昵称将统一返回“微信用户”。如业务需获取用户头像昵称,可以使用「头像昵称填写能力」头像选择需要将 button 组件 open-type 的值设置为 chooseAvatar,当用......
  • 醒醒吧!你们的Stable Diffusion都用错了!【table Diffusion必装插件使用攻略】让你的AI
    哈喽,大家好,我是AI极客菌,今天给大家分享一下StableDiffusion的插件使用攻略。一、什么是插件StableDiffusion的插件主要是用来丰富SD的一些功能,例如C站助手,提示词助手,图片信息助手等插件都是为了增强SD的实用性。二、安装插件我们以C站助手为例,C站助手可以将从C站(civi......