小程序之定位语音识别=>插件:微信同声传译
说明:文章部分内容及图片出自网络,如有侵权请与我本人联系(主页有公众号:小攻城狮学前端)
作者:小只前端攻城狮、
主页:小只前端攻城狮的主页、
首发:掘金GitHub:P-J27、
CSDN:PJ想做前端攻城狮著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
引言
这是在我做毕设时,涉及到的一个功能点,在小程序上做
语音录入&识别
。这里把如何实现给大家分享一下。有做过wx小程序应该都知道,官方文档说的话==没说
。如果有人以后需要做类似的功能,希望有帮助。避免在官方文档上浪费大把时间。这个功能的主要目的就是:获取用户的语音,并转文字,再内容实时上墙到PC端的网页,这里提到前面的语音获取和语音翻译,至于后面的内容实时上墙到PC端这里先就不提了(技术方案:WebSocket),后面有时间我会专门开一篇文章。
技术方案
这里主要采用小程序插件:微信同声传译。插件文档定位
具体步骤
添加插件=>小程序后台
先登录小程序后台(项目别错了):官网传送
然后 设置 => 第三方设置 => 添加插件
搜索微信同声传译,选择添加。
如果发现搜索不到,别慌(我就是搜不到,坑了我好久)。有以下两种解决办法。
- 进入插件文档定位,点里面的添加,如果添加失败也别慌,还有下面的解决方案。
- 上面的都不行,那就先不管,先直接写代码,在开发中工具里面 等他报错,点击就可以添加。
在插件文档里面拿到Appid和版本号(选最新的)
全局配置app.json
在app.json里面配置插件的appid和版本号(用最新的,不然控制一直警告),上面获取的。
"plugins":{"WechatSI": {"version":"0.3.5","provider":"wx069ba97219f66d99"}},
案例代码实现
index.wxml
<view class="videoWrap"><textarea class='videoCon' bindinput="conInput" placeholder='等待说话...' value='{{content}}'></textarea>
</view>
<view class='video-konw'><button class="videoBtn {{recordState == true ? 'videoBtnBg':''}}" bindtouchstart="touchStart" bindtouchend="touchEnd"><text wx:if="{{recordState == false}}">按住 说话</text><text wx:else>松开 结束</text></button>
</view>
<view class='send-btn'><button class="videoBtn sendBtn" bindtap="sendBarrage" >内容 上墙</button>
</view>
<!-- 开始语音 弹出语音图标表示正在录音 -->
<cover-view class="startYuyinImage" wx:if="{{recordState == true}}"><cover-icon></cover-icon><cover-image src="../../images/video.png"></cover-image><cover-view>开始语音</cover-view>
</cover-view>
index.js
const app = getApp();
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();Page({/*** 页面的初始数据*/data: {//语音recordState: false, //录音状态content:'',//内容},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {/**ws用的文件,这里可以删除this.setData({dataPacker:JSON.parse(options.param)})*///识别语音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: res.result})}},//语音 --按住说话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();},/**ws用的文件,这里可以删除sendBarrage(){if(this.data.content?.length>0){let data = this.data.dataPackerdata.content = this.data.contentthis.sendDataToWS(data)}else{wx.showToast({title: '上墙内容为空',icon:'error'})}},sendDataToWS(data){wx.sendSocketMessage({data: JSON.stringify(data),})},*/
})
index.wxss
我这里用了colorUI,样式你可以自己去重新处理
page {height: 100%;width: 100%;background: #FAFAFA;background-image: url(https://uploads-ssl.webflow.com/60e3d74…/60e3d74…_60e3a35…_Mesh%252087-p-500.jpeg);background-size: cover;
}.videoWrap {margin-top: 150rpx;word-wrap: break-word;position: relative;width: 80%;margin-left: 10%;background: #FFFFFF;box-shadow: 0 2px 16px 2px rgba(0, 0, 0, 0.1);padding: 50rpx 60rpx;box-sizing: border-box;min-height: 260rpx;
}.videoCon {width: 100%;margin: 0 auto;padding: 10rpx;background: #fff;
}.videos {position: absolute;bottom: 0;left: 48rpx;font-size: 36rpx;color: #999;padding-bottom: 10rpx;
}.videos 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;
}.videoBtn {width: 50%;height: 80rpx;line-height: 80rpx;background-image: var(--gradualBlue);color: var(--white);border-radius: 8px;margin-top: 150rpx;
}
.sendBtn{margin-top: 80rpx;background-image: var(--gradualPink);color: var(--white);}
.videoBtnBg {background: #bdb4b4;
}.videoBtn::after {/* background: #fff; *//* color: #000; */border-radius: 0;border: none;
}.startYuyinImage {position: fixed;top: 216rpx;left: 50%;width: 240rpx;height: 300rpx;background: rgba(0, 0, 0, 0.6);border-radius: 20rpx;color: #fff;text-align: center;margin-left: -120rpx;
}.startYuyinImage cover-image {margin: 60rpx auto;width: 100rpx;height: 100rpx;
}.startYuyinImage cover-view {margin-top: 25rpx;
}
说明
上面代码可以直接copy 跑。正常如下
- 如果是上面没有添加成功的情况,你这个copy完代码 直接编译。控制台会报类似如下错误(因为我已经添加,就不好演示,反正就是说你没有添加同声传译插件,然后你直接点击他 他会让你添加,直接就添加好了。)
- 开发者工具的录音文件格式和移动端不同,所以我这里配置的开发者工具录音是识别不了的。如果想要测试的功能是否正常,可以用
演示或者真机调试
感谢阅读,希望能对你有所帮助,文章若有错误或者侵权,可以在评论区留言或在我的主页添加公众号联系我。
写作不易,如果觉得不错,可以「点赞」+「评论」 谢谢支持❤
小程序之定位语音识别=>插件:微信同声传译相关推荐
- 微信小程序基于第三方插件微信同声传译,以及一些问题解决办法
使用之前首先得在微信微信小程序后台添加插件,获取插件的appid 名称 使用时在app.json文件添加插件配置 1 plugins: { 2 WechatSI: { 3 version: '0.1. ...
- 面对面翻译小程序是微信团队针对面对面沟通的场景开发的流式语音翻译小程序,通过微信同声传译插件提供了语音识别,文本翻译等功能。
面对面翻译小程序 面对面翻译小程序是微信团队针对中英文面对面沟通的场景开发的流式语音翻译小程序,基于微信同声传译插件封装实现,提供了中英文语音识别,文本翻译等功能. 预览 下载与使用 克隆代码 pro ...
- 「微信同声传译」小程序插件:快速实现语音转文字、文本翻译、语音合成等能力...
上期,我们在<「医院 LBS 位置服务」插件:输出LBS室内位置能力,为改善就医服务提供解决方案>一文中介绍了「医院 LBS 位置服务」小程序插件的意义.使用场景以及使用方法. 今天我们为 ...
- 微信小程序语音识别、语音合成(微信同声传译)使用代码实例
最近在开发一款"单词大作战"的微信小程序,想增加语音识别.语音合成这2个功能.(让用户能听到单词的读音,并对比自己读音是否标准正确). 查了一下资料,大概有几种方式:用百度翻译(需 ...
- 微信小程序 -- 获取语音,并将语音转为文字(插件:微信同声传译)
实现的功能是获取语音,并将语音转为文字,实现效果如下: 1. 小程序后台添加插件:微信同声传译 登录小程序后台:https://mp.weixin.qq.com 11. 设 ...
- 微信小程序调用微信同声传译插件(中文识别)
微信小程序后台配置添加微信同声传译插件不再详述,具体可自行百度. app.json添加这段代码: "plugins": {"WechatSI": {" ...
- 「微信同声传译」小程序插件
上期,我们在<「医院 LBS 位置服务」小程序插件>一文中介绍了「医院 LBS 位置服务」小程序插件的意义.使用场景以及使用方法. 今天我们为大家推荐的插件是「微信同声传译」,如果你想在小 ...
- 微信小程序 -- 语音合成:将文字转为语音(插件:微信同声传译)
直接上手吧. 1. 小程序后台添加插件:微信同声传译以及在app.json进行配置 具体可看另外一篇博客:https://blog.csdn.net/qq_41638795/article/detai ...
- 微信小程序 -语音合成:将文字转为语音(小程序插件:微信同声传译)
1.小程序后台添加微信同声传译插件 效果图: 2.wxml文件代码 <view class="yuyinWrap"><textarea class='yuyinC ...
最新文章
- HDU 3306 Another kind of Fibonacci 矩阵快速幂
- form中的onblur事件简单的介绍
- 从 Android 静音看正确的查找 bug 的姿势
- 金融风控实战——模型融合
- 30个流行的jQuery Plugins
- 安装 | Windows 10下基于Anaconda平台的TensorFlow详细安装步骤
- redis设置键的生存时间或过期时间
- php mysql 拆分join_PHP拼接Sql,MySql拆分数据(substring_index())作为判断条件
- 如何通过JS获取元素宽高
- 计算机的硬盘 u盘启动,U盘启动和硬盘启动两种不同教程步骤
- 蓝桥杯2016年第七届C/C++A组省赛第二题-生日蜡烛
- svpwm的matlab模型,使用simulink进行SVPWM模块的搭建
- Unity3D 制作绿草地,草坪,模型表面生成草地,草地效果Shader实现 草着色器 Brute Force - Grass Shader
- InDesign: Interactive Documents InDesign:交互式文档 Lynda课程中文字幕
- 中国互联网十大骨干网有哪些?了解互联网的真实网络结构
- Flann特征点匹配简述(Lowe's algorithm)
- 眼部识别和指纹识别,你会选择谁?
- SQL学习(五):lastday函数(返回指定日期所在月份的最后一天)
- linux将日历信息导出到,在 Linux 命令行中规划你的假期日历
- 计算机设计网页基础知识,网页设计的基础知识