微信小程式同聲傳譯 Face2FaceTranslator 開發

騰訊開源了微信小程式的同聲傳譯外掛 Face2FaceTranslator ;開發者可以在小程式使用同聲傳譯的功能，以下是本人在專案中做的 demo；我們的小程式是用美團的 mpvue 做的。

Face2FaceTranslator github連結（官方demo）
Face2FaceTranslator 官方開發文件

第一步：配置微信公眾平

首先，需要在微信公眾平臺配置，以下是配置步驟：
開啟微信公眾平臺，點選設定 => 第三方服務 => 新增外掛

搜尋同聲傳譯，點選新增：

第二步：在程式碼裡新增功能：

以下程式碼為關鍵部分程式碼，因為用 mpvue 開發，所以為 vue 程式設計風格，開發者可以根據自己情況進行修改。

首先要在 main.js 中配置

// main.js 需要在配置檔案中配置外掛

export default {
  config: {
    pages: [
      '^pages/imSceneDoctor/imSceneDoctor',
    ],
    window: {
      backgroundTextStyle: 'light',
      backgroundColor: "#000",
      navigationBarBackgroundColor: '#ffffff'
 
,
      navigationBarTitleText: '同聲傳譯 demo',
      navigationBarTextStyle: 'black'
    },
    plugins: {
      "WechatSI": {
        "version": "0.0.6",
        "provider": "wx069ba97219f66d99"
      }
    }
  }
}

然後在開發的檔案使用 （imSceneDoctor.vue 中關鍵的程式碼）。

// imSceneDoctor.vue

<template>
  <ul class
 
="footer-box-bottom">
    <li class="bottom-item" @touchstart='streamRecord(0)' @touchend='streamRecordEnd()'>
      <figure class="bottom-item-content">
        <img class="bottom-item-image" src="https://m.allinmed.cn/static/image/imScene/[email protected]" width="350"
             height="234"/>
        <figcaption class="bottom-item-description">智慧語音</figcaption>
      </figure>
    </li>
    <li class="bottom-item" @touchstart='streamRecord(1)' @touchend='streamRecordEnd()'>
      <figure class="bottom-item-content">
        <img class="bottom-item-image" src="https://m.allinmed.cn/static/image/imScene/[email protected]"
             width="350"
             height="234"/>
        <figcaption class="bottom-item-description">中=>英</figcaption>
      </figure>
    </li>
    <li class="bottom-item" @touchstart='streamRecord(2)' @touchend='streamRecordEnd()'>
      <figure class="bottom-item-content">
        <img class="bottom-item-image" src="https://m.allinmed.cn/static/image/imScene/[email protected]"
             width="350"
             height="234"/>
        <figcaption class="bottom-item-description">英=>中</figcaption>
      </figure>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
  // 獲取**全域性唯一**的語音識別管理器**recordRecoManager**
  const plugin = requirePlugin("WechatSI");
  const manager = plugin.getRecordRecognitionManager();

  export default {
    data() {
      return {
        currentTranslateVoice: '', // 當前播放語音路徑
        sendTextContent:'', // 展示的語音內容
        connectNum: 0,
        recordType:0, // 錄音型別：0，中文錄音；1，中文翻譯英文；2，英文翻譯中文
      }
    },
    onLoad() {
      this.getRecordAuth();
    },
    mounted() {
      this.initRecord();
    },
    methods: {
      // 許可權詢問
      getRecordAuth () {
        wx.getSetting({
          success(res) {
            console.log("succ")
            console.log(res)
            if (!res.authSetting['scope.record']) {
              wx.authorize({
                scope: 'scope.record',
                success() {
                    // 使用者已經同意小程式使用錄音功能，後續呼叫 wx.startRecord 介面不會彈窗詢問
                    console.log("succ auth")
                }, fail() {
                    console.log("fail auth")
                }
              })
            } else {
              console.log("record has been authed")
            }
          }, fail(res) {
              console.log("fail")
              console.log(res)
          }
        })
      },
      /**
       * 初始化語音識別回撥
       * 繫結語音播放開始事件
       */
      initRecord: function() {
        //有新的識別內容返回，則會呼叫此事件
        manager.onRecognize = (res) => {
          let currentData = Object.assign({}, this.sendTextContent, {
                            text: res.result,
                          })
          this.sendTextContent = res.result;
        }

        // 識別結束事件
        manager.onStop = (res) => {

          let text = res.result
          console.log('識別結束');
          console.log(res);
          this.sendTextContent = res.result;
          if (this.recordType) {
            this.translateText(res.result)
          }
        }

        // 識別錯誤事件
        manager.onError = (res) => {
          console.log(res);
        }

        // 語音播放開始事件
        wx.onBackgroundAudioPlay(res=>{

          const backgroundAudioManager = wx.getBackgroundAudioManager()
          let src = backgroundAudioManager.src
          this.currentTranslateVoice = src;
        })
      },
      /**
       * 按住按鈕開始語音識別
       */
      streamRecord: function(type) {
        // 先清空背景音
        let param;
        wx.stopBackgroundAudio();
        this.recordType = type;
        if (type == 2) {
          param = 'en_US';
        } else {
          param = "zh_CN";
        }
        manager.start({
          lang: param,
        })


      },
      /**
       * 鬆開按鈕結束語音識別
       */
      streamRecordEnd: function(e) {

        manager.stop()

      },
      /**
       * 翻譯
       */
      translateText: function(text) {
        let lfrom =  this.recordType === 1 ? 'zh_CN' : 'en_US';
        let lto = this.recordType === 1 ? 'en_US':'zh_CN';



        plugin.translate({
          lfrom: lfrom,
          lto: lto,
          content: text,
          tts: true,
          success: (resTrans)=>{
            console.log(resTrans);
            let passRetcode = [
              0, // 翻譯合成成功
              -10006, // 翻譯成功，合成失敗
              -10007, // 翻譯成功，傳入了不支援的語音合成語言
              -10008, // 翻譯成功，語音合成達到頻率限制
            ]

            if(passRetcode.indexOf(resTrans.retcode) >= 0 ) {
              this.sendTextContent = resTrans.result;
            } else {
              console.warn("翻譯失敗", resTrans, item)
            }

          },
          fail: function(resTrans) {
            console.error("呼叫失敗",resTrans, item)
          },
          complete: resTrans => {
            wx.hideLoading()
          }
        })

      },

    }
  }
</script>

備註：
以上只是個小 demo，並且正常執行，然而並沒有考慮多種邊界情況，如果開發者需要在專案正常使用，也請參考官方demo（上方有 github 地址）。