原 uniapp微信小程序将语音转成文字，使用微信同声传译插件

版权声明：本文为博主原创文章，请尊重他人的劳动成果，转载请附上原文出处链接和本声明。
本文链接：https://www.91mszl.com/zhangwuji/article/details/1444

一：登录微信公众平台

https://mp.weixin.qq.com/

二：添加同声传译插件

点击左侧菜单的“设置 > 第三方设置

三：在manifest.json文件中添加如下的配置，注意是在 mp-weixin下面添加

"plugins" : {
            "WechatSI" : {
                "version" : "0.3.5",
                "provider" : "wx069ba97219f66d99"
            }
        },

目前官网最新版本是0.3.5

四：在页面添加相关代码

4.1）完整代码

<template>
	<view>
			
		识别的内容为：{{voiceState}}	
			
		<!-- 微信同声传译插件[语音输入] -->
		<button class="float-button" hover-class="hover-btn-bg" @touchstart="touchStart" @touchend="touchEnd">
			<uni-icons type="mic" size="40px" color="#fff" />
		</button>
		
		
	</view>
</template>

<script>
	var plugin = requirePlugin("WechatSI"); // 微信同声传译插件[语音输入]
	let manager = plugin.getRecordRecognitionManager(); // 微信同声传译插件[语音输入]
	
	export default {
		data() {
			return {
				voiceState:''
			};
		},
		onLoad() {
			this.initRecord(); // 微信同声传译插件[语音输入]
		},
		methods: {
			touchStart: function() { // 微信同声传译插件[语音输入]
				manager.start({
					duration: 60000, // 指定录音的时长，单位ms，最大为60000
					lang: "zh_CN"
				});
			},
			touchEnd: function() { // 微信同声传译插件[语音输入]
                manager.stop();
            },
			initRecord: function() { // 微信同声传译插件[语音输入]
                manager.onStart = function(res) { // 正常开始录音识别时会调用此事件
					console.log("onStart result AA", res.result)
                    this.voiceState="onStart:"+ res.msg+"正在录音";
                }
                manager.onRecognize = (res) => { // 有新的识别内容返回，则会调用此事件
					console.log("onRecognize result BB", res.result)
                    this.voiceState=res.result;
                }
                manager.onStop = (res) => { // 识别结束事件
					console.log("onStop file path CC", res.tempFilePath)
				    console.log("onStop DD", res.result);
					this.voiceState = res.result;
                }
                manager.onError = (res) => { // 识别错误事件
				    console.error("onError msg FFF", res.msg);
                    this.voiceState = res.msg;
                }
            }
		}
	};
</script>

<style lang="scss">
	.float-button {
		position: fixed;
		right: 15px;
		bottom: 110px;
		width: 55px;
		height: 55px;
		border-radius: 50%;
		background: #39b54a;
		text-align: center;
		display: flex;
		align-items:center;
		justify-content: center;
		box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
		z-index: 999;
	}
	.hover-btn-bg{
		background-color: green;
		color: #fff;
	}
</style>

五：页面效果

参考资料：

1）源码地址：https://github.com/Tencent/Face2FaceTranslator

2）官方文档：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx069ba97219f66d99&token=1202914355&lang=zh_CN#recordrecomanager