uni-app 微信同声传译,实现AI语音功能(语音转文字,文字转语音,英汉互译)
一:添加插件
1、登录微信公众号平台,进入左边导航栏的设置,选择第三方设置,,添加插件,申请添加微信同声传译插件
2、插件文档
1.语音输入
2文本翻译
3语音合成
https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx069ba97219f66d99&token=1204549772&lang=zh_CN
二:使用插件
1、配置
查找插件 appid
在 manifest.json 源码视图中添加插件
2、引入
添加组件
<button class="cu-btn bg-green voicebtn " @touchstart="touchStart" @touchend="touchEnd"></button>
插件引入
var plugin = requirePlugin("WechatSI")
let manager = plugin.getRecordRecognitionManager();
touchStart() 开始录音
touchStart: function() {
manager.start({
duration: 60000,
lang: "zh_CN"
});
},
touchEnd() 结束录音
touchEnd: function() {
uni.showToast()
manager.stop();
},
initRecord() 语音回调
initRecord: function() {
manager.onStart = function(res) {
this.voiceState ="onStart:"+ res.msg+"正在录音"
};
//有新的识别内容返回,则会调用此事件
manager.onRecognize = (res) => {
this.voiceState = res.result;
}
// 识别结束事件
manager.onStop = (res) => {
this.voiceState = res.result;
}
// 识别错误事件
manager.onError = (res) => {
this.voiceState = res.msg;
}
},
三:完整功能页面
<template>
<view>
<view class="voicepad">
{{voiceState}}
</view>
<button class="cu-btn bg-green voicebtn " @touchstart="touchStart" @touchend="touchEnd">
<image src="../../static/record.png" mode="widthFix" style="width: 50rpx;"></image>
</button>
</view>
</template>
<script>
var plugin = requirePlugin("WechatSI")
let manager = plugin.getRecordRecognitionManager();
export default {
data() {
return {
voiceState: "你可以这样说..."
}
},
onShow() {
},
onLoad() {
this.initRecord();
},
methods: {
touchStart: function() {
manager.start({
duration: 60000,
lang: "zh_CN"
});
},
touchEnd: function() {
uni.showToast()
manager.stop();
},
/**
* 初始化语音识别回调
* 绑定语音播放开始事件
*/
initRecord: function() {
manager.onStart = function(res) {
this.voiceState ="onStart:"+ res.msg+"正在录音"
};
//有新的识别内容返回,则会调用此事件
manager.onRecognize = (res) => {
this.voiceState = res.result;
}
// 识别结束事件
manager.onStop = (res) => {
this.voiceState = res.result;
}
// 识别错误事件
manager.onError = (res) => {
this.voiceState = res.msg;
}
},
}
}
</script>
<style>
.voicebtn{height:130upx;display: block;width:130upx;line-height:130upx;border-radius: 65upx;font-size: 50upx;position: absolute;top:1060upx;left:310upx;}
.voicepad{height: 250upx;width:680upx;background: #fff;margin: 30upx auto;border-radius: 8upx;color: #CCCCCC;padding:20upx;font-size: 35upx;}
</style>