uniapp结合小程序第三方插件“WechatSI”实现语音识别功能,进而实现终端控制
最近在用soket实现终端控制器的功能,然后就想用语音控制,这样显得更AI
WechatSI在manifest.json中配置:

在vue中插入如下展示代码:
<view class="voice-content">语音识别内容:<text class="text holy-font">{{currentText}}</text></view>
如果需要按住按钮说话,松开回调:
<button class="echo-btn cuIcon-voice" :class="isSpeaking?'orange':'green'" @touchstart="streamRecord" @touchend="streamRecordEnd"></button>
接下来就是js使用方法:
streamRecord: function() {
voicManager.start({
lang: 'zh_CN',
})
uni.vibrateShort();
this.isSpeaking = true;
},
streamRecordEnd: function() {
voicManager.stop();
uni.vibrateShort();
this.isSpeaking = false;
},
initRecord: function() { //有新的识别内容返回,则会调用此事件
// voicManager.onRecognize = (res) => {
// let text = res.result
// this.currentText=text;
// }
// 识别结束事件
voicManager.onStop = (res) => {
console.log(res)
let text = res.result
if (text == '') { // 用户没有说话,可以做一下提示处理...
return
}
this.currentText = text;
// 这里得到完整识别内容就可以去翻译了
this.translateTextAction();
}
}
// translateTextAction: function() {
// let lfrom = 'zh_CN';
// let lto = 'en_US';
// voicPlugin.translate({
// lfrom: lfrom,
// lto: lto,
// content: this.data.currentText,
// tts: true, // 需要合成语音
// success: (resTrans) => { // 翻译可以得到 翻译文本,翻译文本的合成语音,合成语音的过期时间
// let text = resTrans.result;
// this.translateText=text;
// // this.setData({
// // translateText: text,
// // }); // 得到合成语音让它自动播放出来
// // wx.playBackgroundAudio({
// // dataUrl: resTrans.filename,
// // title: '',
// // });
// }
// })
// },
实现的效果如下:

另:结合利用soket通信推送消息,可实现语音控制大屏展示项目
uniapp结合小程序第三方插件“WechatSI”实现语音识别功能,进而实现终端控制的更多相关文章
- uniapp开发小程序
uniapp开发小程序 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百度/头条 ...
- 「速成应用」实在可靠的 微信小程序第三方代理加盟平台公司
小程序,是基于微信平台的一个划时代产品,也就是嵌入到微信里的一个功能丰富.操作简洁的轻应用,不需要下载安装即可使用.不同的小程序,能实现不同的功能.例如,买电影票.餐厅排号.餐馆点菜.查询公交.查询股 ...
- 小程序第三方框架对比 ( wepy / mpvue / taro )(转)
文章转自 https://www.cnblogs.com/Smiled/p/9806781.html 众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程 ...
- 小程序第三方框架对比 ( wepy / mpvue / taro )
众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...
- 微信小程序图表插件 - wx-charts
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx-c ...
- uni-app解决小程序圆角样式不生效
在使用uni-app实现小程序的时候,设置左图的右圆角不生效,样式也都没有问题,在模拟器上也可以正常现实,手机上样式出现差别,现有以下解决方法: 设置整个圆角,然后左边使用margin-left:-3 ...
- 微信小程序0.11.122100版本新功能解析
微信小程序0.11.122100版本新功能解析 新版本就不再吐槽了,整的自己跟个愤青似的.人老了,喷不动了,把机会留给年轻人吧.下午随着新版本开放,微信居然破天荒的开放了开发者论坛.我很是担心官方 ...
- 微信小程序调用用百度地图天气功能
#小程序之调用百度地图天气功能 本篇博客主要介绍小程序在百度地图中获取天气信息,如有不全请指出.下面先上效果图 主要内容 百度地图API的个人密钥,也就是AK 请求百度地图API接口数据 获取到的信息 ...
- uni-app微信小程序开发之引入腾讯视频小程序播放插件
登录微信小程序管理后台添加腾讯视频播放插件: 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示: 在uni-app中引入插件代码 ...
随机推荐
- 当DIV内出现滚动条,fixed实效怎么办?
sticky 盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位.在所有情况下( ...
- EBGP的多跳与验证命令
EBGP的多跳与验证命令: ①:neighbor router-id ebgp-multihop “int”——设置多跳. ②:neighbor router-id password “str”——设 ...
- centos 通过命令查找已安装的部署包名称
场景: 服务器上已经安装了sz命令,但是我们想知道他是哪个包安装的. 步骤一: [root@localhost home]# whereis sz sz: /usr/bin/sz /usr/share ...
- matplotlib画图实例-day1
matplotlib主要用于根据数据画各种图表 官网:https://matplotlib.org/gallery/index.html 例1:画一天中每个两个小时温度变化趋势图 #!/usr/bin ...
- (5)opencv的基础操作和矩阵的掩模操作
不懂的,可以简单,看看这个网址:https://blog.csdn.net/xiongwen_li/article/details/78503491 图片放到了桌面,所以,图片的路径就是桌面了,剩余的 ...
- 10. react 基础 ref 的使用 及 React 16 的生命周期函数 及 生命周期函数使用场景
一. ref 的使用 ( 直接获取 DOM 元素 ) 在 input 标签上 可以使用 ref 属性 获取当前DOM节点 eg: import React , { Component, Fragmen ...
- MySQL读写分离如何实现?
主要说下读写分离, 当我们的数据量很大时,数据库服务器的压力变大,这时候我们需要从架构方面来解决这一问题,在一个网站中读的操作很多,写的操作很少,这时候我们需要配置读写分离,把读操作和写操作分离出来, ...
- Exchange 2016 CU12安装报错
1. 报错信息: Exchange 2016 升级 CU12补丁报错,主要是在进行第10步安装管理工具时报SeSecurityPrivilega错误,详细如下: 查看安装log信息如下 ...
- Java时间格式化年-月-日-时间
Date d = new Date(); System.out.println(d); //Sat Mar 16 20:58:56 CST 2019 System.out.println(d.toLo ...
- CSS padidng-top\margin-top\fixed 的特殊性
参考: 使用css时,可能会出错的两个地方 1.padidng-top\margin-top padidng-top\margin-top可以设置'px' 或者是'%',设置'px'略过,说一下设置‘ ...