一、同声翻译插件的申请
点击小程序管理后台后，再次点击设置，选中第三方服务
搜索同声传译，将插件添加至自己的小程序服务中
点击详情可看到官方文档及AppId（后续使用中会用到）
二、uni-app中的引用
新建项目后，选中manifest.json文件，切换至源码视图（右侧菜单栏最下方！）
在mp--weixin的appid（千万别看错了，上方还有一个AppID）同级下写插件的相关信息
"mp-weixin": { /* 小程序特有相关 */ "appid": "你自己的小程序id", "plugins": { "WechatSI": { "version": "0.3.3", "provider": "wx069ba97219f66d99" } }, "setting": { "urlCheck": false }, "usingComponents": true },
特别注意！！！！！！！！！！version版本最好是0.3.3，高于此版本可能会无法使用，并且provider应该都是这个，所以复制即用！
<template> <view> <!-- 语音识别区 --> <!-- 语音内容图片+转文字，没有语音时是隐藏状态 --> <view class="content" v-if="shows"> <!-- 语音声纹图片 --> <view class="tet" style="position: relative;"> <view style="position: absolute;width: 30px;height: 30px;background-color: #e9c2db;right: 0;border-radius: 50%;top: 10px;" :class="num == 1 ? '' : 'op'"> <!-- 转文字按钮 fanyi为转译事件 --> <image style="width: 30px;height: 30px;" src="https://pic.imgdb.cn/item/64c85b431ddac507cc0e7284.png" @tap="fanyi"></image> </view> </view> <!-- 翻译内容点击fanyi后出现 --> <view class="voicepad" style="margin-top: 20px;width: 94%;margin-left: 3%;padding: 10px; font-size: 12px;"> {{endOne}} </view> </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 class="action" v-show="!shows"> <!-- 开始录音按钮 长按录音 松手上传 text为-----开始录音----上传录音文字 --> <button @longpress="startRecord" @touchend="endRecord" @tap="startRecord">{{text}}</button> </view> <view class="actioning" v-show="shows"> <button @tap="playVoice" style="background-color: #d1f2d7;color: #18bc37;">播放录音</button> <button @tap="resetVoice" style="background-color: #fdedd9;color: #f3a73f;">重置录音</button> </view> </view> </template>
<script> // 录音播放事件引入 const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; // 翻译事件引入 var plugin = requirePlugin("WechatSI") let manager = plugin.getRecordRecognitionManager() export default { data() { return { text: '开始录音', voicePath: '', // 音频展示 shows: false, // 动画状态 animation: false, voiceState: "点击录音进行翻译", endOne: '', num: 1 } }, onShow() { }, onLoad() { // 初始化调用 this.initRecord(); }, methods: { startRecord() { console.log('开始录音'); manager.start({ duration: 30000, lang: "zh_CN" }) this.text = '松手上传'; this.animation = true }, endRecord() { console.log('录音结束'); this.text = '开始录音'; this.animation = false this.shows = true manager.stop(); }, playVoice() { console.log('播放录音'); if (this.voicePath) { innerAudioContext.src = this.voicePath; innerAudioContext.play(); } }, resetVoice() { console.log('重置录音'); innerAudioContext.stop(); this.shows = false this.voicePath = ''; this.endOne = '' this.voiceState = '' this.num = 1 }, fanyi() { if (this.num == 1) { console.log(this.voicePath); this.endOne = this.voiceState this.num = this.num + 1 uni.showToast({ title: '转换成功', icon: 'success', duration: 2000, //持续时间为 2秒 }) }else{ uni.showToast({ title: '文字已翻译，请勿重复点击', icon: 'error', duration: 2000, //持续时间为 2秒 }) } }, /** * 初始化语音识别回调 * 绑定语音播放开始事件 */ initRecord: function() { manager.onStart = function(res) { this.voiceState = "onStart:" + res.msg + "正在录音" }; //有新的识别内容返回，则会调用此事件 manager.onRecognize = (res) => { this.voiceState = res.result; } // 识别结束事件 manager.onStop = (res) => { this.voicePath = res.tempFilePath; this.voiceState = res.result; if (this.voiceState == '') { console.log('没有说话') this.endOne = '周围太安静啦~再试试~'; } } // 识别错误事件 manager.onError = (res) => { this.voiceState = '翻译员去吃饭啦，等下再试试'; this.shows = false uni.showToast({ title: '翻译员去吃饭啦，等下再试试', icon: 'error', duration: 2000, //持续时间为 2秒 }) } }, } } </script>
<style> .content { box-sizing: border-box; width: 98%; margin-left: 1%; min-height: 300px; padding-top: 20px; padding-left: 15px; padding-right: 15px; padding-bottom: 20px; display: flex; flex-direction: column; align-items: center; } .tet { width: 100%; height: 50px; margin-top: 25px; border-radius: 30px; background-repeat: no-repeat; background-size: 100% 100%; background-image: url('https://pic.imgdb.cn/item/64c85a901ddac507cc0d52a4.png'); position: relative; } .action { position: fixed; bottom: 20px; width: 100%; } .action button { background-color: #d1f2d7; color: #18bc37; font-size: 14px; display: flex; height: 40px; width: 96%; margin-left: 2%; align-items: center; justify-content: center; } .actioning { position: fixed; bottom: 20px; width: 100%; display: flex; align-items: center; justify-content: space-between; } .actioning button { height: 40px; width: 45%; border: 0; font-size: 14px; display: flex; align-items: center; justify-content: center; } .bbig { width: 94%; } .op{ visibility: hidden; } /* 动画 */ .prompt { width: 100%; height: 80px; position: fixed; bottom: 70px; } .prompt text { position: absolute; bottom: 2px; color: #f3a73f; 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: #fdedd9; border-radius: 20px; } .dot { height: 16px; width: 16px; margin-right: 10px; border-radius: 10px; background-color: #f3a73f; 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: #f3a73f; box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7); } 50% { transform: scale(1.2); background-color: #f9d39f; box-shadow: 0 0 0 10px rgba(178, 212, 252, 0); } 100% { transform: scale(0.8); background-color: #f3a73f; box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7); } } @keyframes puls { 0% { transform: translateY(0px) } 50% { transform: translateY(-4px) } 100% { transform: translateY(0px) } } </style>
至此同声翻译就可以使用了，本文主要使用的是录音完毕后，提供播放录音及翻译录音两个选项，也可以改动后支持同声同步翻译。
demo复制即可使用，只需要修改图片，如果真机运行报错，建议切换真机1.0进行测试。
