此项目是根据mpvue开发，如用原生小程序方法进行相应的参数定义修改就可以了
小程序管理后台 --> 设置 --> 第三方服务 --> 插件管理中查找插件名称「微信同声传译」
image.png
去app.json进行配置(微信同声传译详情能看到appid和更新 记录)
"plugins": {
"WechatSI": {
"version": "0.2.2",
"provider": "wx069ba97219f66d99"
}
}
image.png
定义语音转文字组件
<template>
<div class="auth-pop" v-if="status">
<div class="videoText">
<div class="videoTextTitle">
<div style="width:60rpx;height:60rpx;"></div>
<div>识别中</div>
<div>
<img @click="closeToast" src="https://download.fengyouhui.net/fyh_internet_hospital/img/icon/video_close.png" style="width:60rpx;height:60rpx;" alt="">
</div>
</div>
<div>
<div style="text-align:center;">
<div class="video_title">{{videoSubmitTitle}}</div>
<div >
<img src="https://download.fengyouhui.net/fyh_internet_hospital/img/IM/video_line.gif" alt="" style="width:613rpx;height:155rpx;display: inline-block;">
</div>
<div :class="videoSubmitStatus?'video_submit':'video_submit_after'" @click="stopVideo">{{videoSubmitText}}</div>
<!-- <view catchtouchstart="streamRecord" catchtouchend="endStreamRecord"> 语音识别按钮 </view> -->
<!-- <div :class="videoSubmitStatus?'video_submit':'video_submit_after'" @touchstart="touchStart" @touchend="touchEnd">{{videoSubmitText}}</div> -->
</div>
</div>
</div>
</div>
</template>
<script>
var plugin = requirePlugin("WechatSI");
let manager = plugin.getRecordRecognitionManager();
export default {
data() {
return {
videoSubmitText:'说完了',
videoSubmitStatus:true,
text:''
}
},
model:{
prop:'text',
event:'changeText'
},
props:{
status:{
type:String,
default:'default',
required: false
},
videoTextBack:{
type:Function,
}
},
watch: {
status(value){
// this.status = true;
this.touchStart();
console.log(this.status);
console.log(this.videoSubmitStatus)
}
},
onLoad(){
this.initRecord()
},
methods:{
//识别语音 -- 初始化
initRecord: function () {
const that = this;
// 有新的识别内容返回，则会调用此事件
manager.onRecognize = function (res) {
console.log(res)
}
// 正常开始录音识别时会调用此事件
manager.onStart = function (res) {
console.log("成功开始录音识别", res)
}
// 识别错误事件
manager.onError = function (res) {
console.error("error msg", res)
}
//识别结束事件
manager.onStop = function (res) {
console.log('语音内容 --> ' + res.result);
if (res.result == '') {
wx.showModal({
title: '提示',
content: '听不清楚，请重新说一遍！',
showCancel: false,
success: function (res) {}
})
// return;
}
var text = that.text + res.result;
that.$emit('videoTextBack',text);
// that.setData({
// content: text
// })
console.log(text)
}
},
//语音 --按住说话
touchStart: function (e) {
// this.status = true;
this.videoSubmitStatus = true;
// this.setData({
// recordState: true //录音状态
// })
// 语音开始识别
manager.start({
lang: 'zh_CN',// 识别的语言，目前支持zh_CN en_US zh_HK sichuanhua
})
},
//语音 --松开结束
touchEnd: function (e) {
// this.setData({
// recordState: false
// })
// 语音结束识别
manager.stop();
// this.videoSubmitText='说完了';
// this.videoSubmitStatus = true;
// this.status = false;
},
closeToast(){
this.$emit('videoTextBack','');
this.videoSubmitText='说完了';
this.videoSubmitStatus = true;
this.status = false;
},
stopVideo(){
// wx.stopRecord();
this.touchEnd();
// this.videoSubmitTitle='识别中';
},
}
};
</script>
<style scoped lang="less">
.videoTextTitle{
padding: 30rpx 20rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 36rpx;
color: #202020;
}
.video_submit{
padding: 15rpx 52rpx;
border: solid 1rpx #2173F9;
border-radius: 36rpx;
display: inline-block;
color: #2173F9;
margin: 55rpx 0;
}
.video_submit_after{
padding: 15rpx 52rpx;
border: solid 1rpx #909090;
border-radius: 36rpx;
display: inline-block;
color: #909090;
margin: 55rpx 0;
}
.auth-pop{
position: fixed;
display: block;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9;
background: rgba(0,0,0,0.6);
}
.videoText{
background: #fff;
position: absolute;
bottom: 0;
width: 100%;
border-radius:28rpx 28rpx 0px 0px;
}
.tab{
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
}
.box {
width: 280px;
background: #fff;
font-size: 15px;
color: #8D8D8D;
padding-top: 15px;
border-radius: 14px;
overflow: hidden;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
line-height: 24px;
text-align: center;
.p1 {
color: #000000;
font-size: 18px;
line-height: 40px;
}
.p2{
box-sizing: border-box;
padding: 15px 15px;
text-align: left;
}
.p3 {
height: 50px;
line-height: 50px;
display: flex;
align-items: center;
justify-content: space-around;
border-top: 1px solid #DDDDDD;
span,button {
width: 50%;
height: 100%;
text-align: center;
border: none;
font-size: 15px;
line-height: 50px;
}
.no{
color: #FF3535;
border-right: 1px solid #DDDDDD;
}
.yes {
color: #485ED9;
background: transparent;
box-shadow: none;
}
}
}
</style>
调用组件
<videoText :status="videoTextStatus" @videoTextBack="videoTextBack"></videoText>
//这个方法是弹出转文字框
inquiryLanguage(){
this.videoTextStatus = true;
},
//这个是回调函数
videoTextBack(value){
this.videoTextStatus = false;
this.content = value;
},
videoTextStatus //data 定义这个status true是弹语言转文字框，false隐藏
网友评论