uniapp小程序语音转文字功能

先看效果

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

 接下来打开你的项目

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

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

语音识别按钮 语音识别内容：{{currentText}} 录音中...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.resultthis.currentText = text}// 识别结束事件manager.onStop = (res) => {console.log(res, 37);let text = res.resultif (text == '') {console.log('没有说话')return}this.currentText = text}},},onLoad() {this.initRecord()},}/* 动画 */.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)}}