当前位置:   article > 正文

uni-app 微信同声传译,实现AI语音功能(语音转文字,文字转语音,英汉互译_uniapp 微信同声传译

uniapp 微信同声传译

一:添加插件

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>

  • 1
  • 2

插件引入

var plugin = requirePlugin("WechatSI")  
let manager = plugin.getRecordRecognitionManager();

  • 1
  • 2
  • 3

touchStart() 开始录音

touchStart: function() {   
                        manager.start({  
                            duration: 60000,  
                            lang: "zh_CN"  
                        });  
            },  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

touchEnd() 结束录音

touchEnd: function() {  
                uni.showToast()  
                manager.stop();  
            }, 
  • 1
  • 2
  • 3
  • 4

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;  

                }  
            },  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

三:完整功能页面

<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>  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小舞很执着/article/detail/797877
推荐阅读
相关标签
  

闽ICP备14008679号