使用微信同声传译插件开发一款翻译类的小程序

使用微信同声传译插件开发一款翻译类的小程序

1. 微信同声传译插件简介

1.1 微信同声传译插件有三个功能：语音输入、文本翻译、语音合成。可参考微信开发文档https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/translator.html

2. 示例代码

2.1 使用语音输入功能示例代码， 通过获取全局唯一的语音识别管理器recordRecoManager实现

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

//index.js
var plugin = requirePlugin("WechatSI")
let manager = plugin.getRecordRecognitionManager()
manager.onRecognize = function(res) {
    console.log("current result", res.result)
}
manager.onStop = function(res) {
    console.log("record file path", res.tempFilePath)
    console.log("result", res.result)
}
manager.onStart = function(res) {
    console.log("成功开始录音识别", res)
}
manager.onError = function(res) {
    console.error("error msg", res.msg)
}
manager.start({duration:30000, lang: "zh_CN"})

2.2 使用文本翻译功能示例代码，文本翻译目前支持的语言有 zh_CN（中国大陆） en_US（英语）

plugin.translate({
  lfrom:"en_US",
  lto:"zh_CN",
  content:"hello, this is the first time to test？",
  success: function(res) {
    if(res.retcode == 0) {
      console.log("result", res.result)
    } else {
      console.warn("翻译失败", res)
    }
  },
  fail: function(res) {
    console.log("网络失败",res)
  }
})

2.3 使用语音合成功能示例代码，语音合成支持的语言有 zh_CN（中国大陆），en_US(英文)

plugin.textToSpeech({
    lang: "zh_CN",
    tts: true,
    content: "一个常见的需求",
    success: function(res) {
        console.log("succ tts", res.filename)   
    },
    fail: function(res) {
        console.log("fail tts", res)
    }
})

3. 具体使用

3.1 在app.json文件使用插件

  "plugins": {
    "WechatSI": {
      "version": "0.3.5",
      "provider": "wx069ba97219f66d99"
    }
  },

3.2 页面的js文件

// 同声传译插件
var plugin = requirePlugin('WechatSI');
// 播报语音的API
var innerAudioContext = wx.createInnerAudioContext();
// ...

  // 语音播报
  speechText: function (e) {
    let that = this
    if (that.data.src == '') {
      return;
    }
    // 音频文件地址
    innerAudioContext.src = that.data.src
    // 播放速度
    innerAudioContext.playbackRate = 1
    // 开始播放
    innerAudioContext.onPlay((res) => {
		// ...
    })

    // 播放结束
    innerAudioContext.onEnded((res) => {
      // ...
    })

    // 播放出错
    innerAudioContext.onError((res) => {
      
    })
    // 播放停止
    innerAudioContext.onStop((res) => {
      
    })

    // 开始播报
    innerAudioContext.play();
  },

3.3 效果图

> 3.4 微信小程序体验