嗨,欢迎来到阿拉丁指数
  • 登录 注册
小程序
小程序码 扫码使用小程序
研究报告
行业活动
    面对面小程序开源
    2018-05-29 17:00 100000+

    开源地址:

    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门槛搞定!!

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

    文章来源:微信后台团队

    THE END

    本文章仅代表作者观点,不代表阿拉丁官方立场,本文系作者授权 阿拉丁指数平台( aldzs.com)、阿拉丁指数公众号发表,未经许可,不得转载。

    上升最快
    新进榜单
      跌出榜单
        • 阿拉丁服务顾问

        • 阿拉丁数据助手

        • 体验指数小程序