一、背景

二、效果

编辑

三、保姆级教程

3.1 小程序后台添加插件：微信同声传译

3.1.1 设置 -> 第三方设置 -> 添加插件

3.1.2 搜索插件

3.1.3 成功添加后，点击详情

3.1.4 复制它的AppID和最新版本号（后序有用）

3.2 配置项目

3.2.1 微信原生小程序

3.2.2 uniapp配置

3.3 页面展示

3.3.1 wxml代码

3.3.2 js代码

3.3.3 css代码

3.3.4 注意-只能在真机上测试

四、高阶玩法

五、坑

一、背景

在我们的工作中可能会遇到这种情况，需要用到微信语音识别来进行内容赋值，增强用户的的体验感，俗称所谓的逼格

二、效果

参考下面大佬的文章

微信小程序 -- 获取语音，并将语音转为文字（插件：微信同声传译）_微信小程序语音转文字_星星之火M的博客-CSDN博客

三、保姆级教程

3.1 小程序后台添加插件：微信同声传译

3.1.1 设置 -> 第三方设置 -> 添加插件

3.1.2 搜索插件

3.1.3 成功添加后，点击详情

3.1.4 复制它的AppID和最新版本号（后序有用）

3.2 配置项目

3.2.1 微信原生小程序

去app.json进行配置

其中，version的值对应上面的版本号，provider的值对应上面的AppID

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

3.2.2 uniapp配置

在manifest.json文件 -> 源码视图

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

3.3 页面展示

3.3.1 wxml代码

<view class="yuyinWrap"><textarea class='yuyinCon' placeholder='请输入内容' value='{{content}}'></textarea><!--  --><view class=''><button class="yuyinBtn {{recordState == true ? 'yuyinBtnBg':''}}" bindtouchstart="touchStart" bindtouchend="touchEnd"><text wx:if="{{recordState == false}}">按住 说话</text><text wx:else>松开 结束</text></button></view><!-- 开始语音 弹出语音图标表示正在录音 --><cover-view class="startYuyinImage" wx:if="{{recordState == true}}"><cover-image src="../resource/image/yuyin-min.png"></cover-image><cover-view>开始语音</cover-view></cover-view>
</view>

3.3.2 js代码

参考官方文档

微信同声传译 | 微信开放文档

const app = getApp();
//引入插件：微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();Page({/*** 页面的初始数据*/data: {//语音recordState: false, //录音状态content:'',//内容},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//识别语音this.initRecord();},// 手动输入内容conInput: function (e) {this.setData({content:e.detail.value,})},//识别语音 -- 初始化initRecord: function () {const that = this;// 有新的识别内容返回，则会调用此事件manager.onRecognize = function (res) {console.log(res)}// 正常开始录音识别时会调用此事件manager.onStart = function (res) {console.log("成功开始录音识别", res)}// 识别错误事件manager.onError = function (res) {console.error("error msg", res)}//识别结束事件manager.onStop = function (res) {console.log('..............结束录音')console.log('录音临时文件地址 -->' + res.tempFilePath); console.log('录音总时长 -->' + res.duration + 'ms'); console.log('文件大小 --> ' + res.fileSize + 'B');console.log('语音内容 --> ' + res.result);if (res.result == '') {wx.showModal({title: '提示',content: '听不清楚，请重新说一遍！',showCancel: false,success: function (res) {}})return;}var text = that.data.content + res.result;that.setData({content: text})}},//语音  --按住说话touchStart: function (e) {this.setData({recordState: true  //录音状态})// 语音开始识别manager.start({lang: 'zh_CN',// 识别的语言，目前支持zh_CN en_US zh_HK sichuanhua})},//语音  --松开结束touchEnd: function (e) {this.setData({recordState: false})// 语音结束识别manager.stop();},
})

3.3.3 css代码

/* pages/yuyin/yuyin.wxss */.yuyinWrap {position: relative;margin-top:300rpx;
}.yuyinCon {border: 1px solid #ccc;margin: 0 auto;padding: 10rpx 10rpx 70rpx;
}.yuyin {position: absolute;bottom: 0;left: 48rpx;font-size: 36rpx;color: #999;padding-bottom: 10rpx;
}.yuyin icon.iconfont {font-size: 34rpx;padding: 0 17rpx 15rpx;border-radius: 50%;background: #73dbef;margin-right: 14rpx;color: #fff;
}.consultYuyin {height: 100%;width: 90%;
}.icon-jianpan1 {position: absolute;left: 10rpx;bottom: 6px;color: #606267;font-size: 60rpx;
}.yuyinBtn {width: 70%;height: 70rpx;position: absolute;right: 112rpx;bottom: 12rpx;border: 1px solid #eee;background: #fff;color: #606267;line-height: 62rpx;
}.yuyinBtnBg {background: #eee;
}.yuyinBtn::after {/* background: #fff; *//* color: #000; */border-radius: 0;border: none;
}.startYuyinImage {position: fixed;top: 210rpx;left: 50%;width: 190rpx;height: 240rpx;background: rgba(0, 0, 0, 0.6);border-radius: 20rpx;color: #fff;text-align: center;margin-left: -95rpx;
}.startYuyinImage cover-image {margin: 30rpx auto;width: 100rpx;height: 100rpx;
}.startYuyinImage cover-view {margin-top: 25rpx;
}

3.3.4 注意-只能在真机上测试

注意：测试时，在微信开发者工具无效果，要预览或者真机调试下，手机进行测试。

四、高阶玩法

（保姆教程及高级玩法-自定义数据处理）微信同声传译插件-语音识别__揽的博客-CSDN博客

五、坑

微信同声传译插件不进onRecognize的方法 | 微信开放社区

（保姆教程及高级玩法及坑）微信同声传译插件-语音识别相关推荐

【ASP.NET Core】依赖注入高级玩法——如何注入多个服务实现类
依赖注入在 ASP.NET Core 中起中很重要的作用,也是一种高大上的编程思想,它的总体原则就是:俺要啥,你就给俺送啥过来.服务类型的实例转由容器自动管理,无需我们在代码中显式处理. 因此,有了依 ...
12面魔方公式图解法_【高级篇】（三）三阶魔方CFOP高级玩法之——F2L
一.F2L这一步要干什么 1.先了解一下"棱角对"和"槽位"的概念棱角对:即由一个棱块和一个角块构成,是F2L的基本单元(共四组) 槽位:给"棱角对 ...
SkyWalking之高级玩法
导读 SkyWalking是基于javaagent的两大字节码操作工具之一的Byte Buddy实现的无侵入APM(application performance monitor) 系统,目前项目在A ...
Vim的几个高级玩法
文章目录 vim的几种模式扩展命令模式命令: 命令模式高频命令: 命令模式进阶命令: vim高级玩法小结: 在Linux中编辑文件的场景非常之多,掌握一些关键命令和技巧.能够大大提高效率,使用体 ...
涨知识！原来华为手机摄像头还有这些高级玩法，学会轻松提高工作效率
众所周知,华为手机广受用户的喜爱,主要是因为华为手机的实用性强,并且拍照能力也是世界顶尖水平.不过你知道吗?拍照与办公融合,将解锁华为手机摄像头的高级玩法,今天笔者就分享两个,不仅有趣还非常实用的摄像 ...
java enum枚举类的用法以及高级玩法
enum(枚举)类介绍 java枚举类是一组预定义常量的集合,使用enum关键字声明这个类,常量名称官方建议大写 1.enum类基本用法举一个常见的例子,例如星期就可以描述为一个枚举类,如下 pub ...
vnc移植_【安富莱】开源原创高级玩法，用F429接SDRAM虚拟远程VNC桌面
[安富莱]开源原创高级玩法,用F429接SDRAM虚拟远程VNC桌面说明: 0. 这个项目的可玩性极高,可以做很多有意思的应用.做一些远程智能控制尤其方便,省去了学习html,xml,js等麻烦,且无 ...
魔方cfop公式软件_【高级篇】（三）三阶魔方CFOP高级玩法之——F2L
一.F2L这一步要干什么 1.先了解一下"棱角对"和"槽位"的概念棱角对:即由一个棱块和一个角块构成,是F2L的基本单元(共四组) 槽位:给"棱角对 ...
魔方cfop公式软件_【高级篇】（四）三阶魔方CFOP高级玩法之——OLL
一.OLL这一步需要做什么? OLL这一步是最容易理解的,到了这一步,前两层已经全部复原了那不管顶面出现什么情况,都能用一个公式将顶面黄色朝向全部调整正确(顺序不管) 一步到位的代价就是--这步骤有 ...

（保姆教程及高级玩法及坑）微信同声传译插件-语音识别

一、背景

二、效果

三、保姆级教程

3.1 小程序后台添加插件：微信同声传译

3.1.1 设置 -> 第三方设置 -> 添加插件

3.1.2 搜索插件

3.1.3 成功添加后，点击详情

3.1.4 复制它的AppID和最新版本号（后序有用）

3.2 配置项目

3.2.1 微信原生小程序

3.2.2 uniapp配置

3.3 页面展示

3.3.1 wxml代码

3.3.2 js代码

3.3.3 css代码

3.3.4 注意-只能在真机上测试

四、高阶玩法

五、坑

（保姆教程及高级玩法及坑）微信同声传译插件-语音识别相关推荐

最新文章

热门文章