先看效果
首先是在微信公众平台），左侧菜单栏中的设置-->第三方设置下的插件管理-->添加-->搜索微信同声传译
接下来打开你的项目
// 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>
