微信小程式同聲傳譯 Face2FaceTranslator 開發
阿新 • • 發佈:2018-11-15
微信小程式同聲傳譯 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 地址)。