uniapp小程序语音转文字功能

先看效果

首先是在微信公众平台），左侧菜单栏中的设置-->第三方设置下的插件管理-->添加-->搜索微信同声传译

如果搜索不到通过这个链接添加https://fuwu.weixin.qq.com/search?tab=3&type=&serviceType=3&page=1&kw=微信同声传译

 接下来打开你的项目

// manifest.json
"mp-weixin": {
    "appid": "xx", // 这是你小程序的AppId
    ...
    "plugins": {
        "WechatSI": {
            "version": "0.3.3", // 版本 可以自己去文档查看选择版本
            "provider": "wx069ba97219f66d99" // 插件id
        }    
    }
}

 做完以上步骤之后，就可以进行开发了，效果图里的业务代码不方便展示，我自己写了个demo可以直接复制粘贴

<template>
	<view>
		<button @touchstart="streamRecord" @touchend="endStreamRecord" form-type="submit" type="primary"
			class="fc-white">语音识别按钮</button>
		<view> 语音识别内容：{{currentText}} </view>

		<!-- 语音音阶动画 长按说话时的动画 -->
		<view class="prompt" v-if="animation">
			<section class="dots-container">
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
			</section>
			<text>录音中...</text>
		</view>
	</view>
</template>

<script>
	var plugin = requirePlugin("WechatSI")
	let manager = plugin.getRecordRecognitionManager()
	export default {
		data() {
			return {
				currentText: "",
				animation: false,
			}
		},
		methods: {
			streamRecord: function() {
				console.log('开始')
				this.animation = true;
				manager.start({
					lang: 'zh_CN',
				})
			},
			endStreamRecord: function() {
				this.animation = false;
				console.log('结束')
				manager.stop()
			},
			initRecord: function() {
				//有新的识别内容返回，则会调用此事件
				manager.onRecognize = (res) => {
					let text = res.result
					this.currentText = text
				}
				// 识别结束事件
				manager.onStop = (res) => {
					console.log(res, 37);
					let text = res.result
					if (text == '') {
						console.log('没有说话')
						return
					}
					this.currentText = text
				}
			},
		},
		onLoad() {
			this.initRecord()
		},

	}
</script>

<style lang="scss" scoped>
	/* 动画 */
	.prompt {
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 50vh;
	}

	.prompt text {
		position: absolute;
		bottom: 2px;
		color: white;
		left: calc(45%);
		animation: puls 1.5s infinite ease-in-out;
	}

	.dots-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80px;
		width: 45%;
		position: absolute;
		bottom: 0px;
		left: calc(27.5%);
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 40rpx;
	}

	.dot {
		height: 28rpx;
		width: 28rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
		background-image: linear-gradient(#5396FF, #AEDAFF);
		animation: pulse 1.5s infinite ease-in-out;
	}

	.dot:last-child {
		margin-right: 0;
	}

	.dot:nth-child(1) {
		animation-delay: -0.3s;
	}

	.dot:nth-child(2) {
		animation-delay: -0.1s;
	}

	.dot:nth-child(3) {
		animation-delay: 0.1s;
	}

	@keyframes pulse {
		0% {
			transform: scale(0.8);
			background-color: #66A3FF;
			/* 更改为与.dot背景色相近的颜色 */
			box-shadow: 0 0 0 0 rgba(102, 163, 255, 0.7);
			/* 使用相同的颜色 */
		}

		50% {
			transform: scale(1.2);
			background-color: #ADD8FF;
			/* 稍浅的颜色，增加对比度 */
			box-shadow: 0 0 0 10px rgba(174, 218, 255, 0);
			/* 使用.dot的结束颜色，但透明度为0 */
		}

		100% {
			transform: scale(0.8);
			background-color: #66A3FF;
			/* 与0%时的颜色相同 */
			box-shadow: 0 0 0 0 rgba(102, 163, 255, 0.7);
			/* 与0%时的box-shadow相同 */
		}
	}

	@keyframes puls {
		0% {
			transform: translateY(0px)
		}

		50% {
			transform: translateY(-4px)
		}

		100% {
			transform: translateY(0px)
		}
	}
</style>