面对面小程序开源

开源地址:

https://github.com/Tencent/Face2FaceTranslator

近期我们发布了微信同声传译小程序插件，免费开放微信AI团队在机器翻译、智能语音领域的业界领先成果，使开发者简便地在小程序中加入机器翻译、智能语音能力。

现在我们开源完全基于微信同声传译插件实现的面对面翻译小程序，以进一步降低小程序开发者使用插件的门槛。

小程序开发者参考面对面翻译开源实现，只需要调用几个简单API，就可以完成一个翻译应用。

我们的终极目标是：0门槛搞定！！

插件功能

• 语音输入
• 语音合成
• 文本翻译

下面将展示如何使用插件“0门槛”5步轻松实现面对面翻译小程序。

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：语音输入

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

<!-- index.wxml -->
<view  catchtouchstart="streamRecord" catchtouchend="endStreamRecord">中文</view>

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

step 3：绑定录音回调事件

<!-- index.wxml -->
<!-- 可以在页面上实时输出语音识别结果 -->
<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：文本翻译

<!-- index.wxml -->
<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 => {
      // 可以重新得到语音合成文件和过期时间
    },
})

小程序开发者参考面对面翻译开源实现，只需要调用几个简单API，就可以完成一个包含有语音输入、语音合成、文本翻译的应用。

0门槛搞定！！

想尝试微信语音输入、微信翻译的小程序开发同学们，赶紧行动吧！

​ 本文转自微信后台团队,如有侵犯,请联系我们立即删除

OpenIMgithub开源地址：

https://github.com/OpenIMSDK/Open-IM-Server

OpenIM官网 ： https://www.rentsoft.cn

**OpenIM官方论坛： ** https://forum.rentsoft.cn/

更多技术文章：

开源OpenIM：高性能、可伸缩、易扩展的即时通讯架构
https://forum.rentsoft.cn/thread/3

【OpenIM原创】简单轻松入门 一文讲解WebRTC实现1对1音视频通信原理
https://forum.rentsoft.cn/thread/4

【OpenIM原创】开源OpenIM：轻量、高效、实时、可靠、低成本的消息模型
https://forum.rentsoft.cn/thread/1