使用微信同声传译插件开发一款翻译类的小程序
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 微信小程序体验