微信小程序-使用微信同声传译插件实现语音识别

2023-10-20 19:30

本文主要是介绍微信小程序-使用微信同声传译插件实现语音识别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

摘要

微信同声传译插件是微信自研的语音输入,文本翻译等功能的插件封装,用于提供给第三方小程序调用。
这里只使用此插件的语音输入功能实现语音识别,识别结果显示在输入框,并将识别结果传入后台进行查找,实现搜索功能。

效果图

在这里插入图片描述

添加同声传译插件

小程序管理后台-设置-第三方服务
在这里插入图片描述

目前最新版本为0.3.4
AppID:wx069ba97219f66d99
在这里插入图片描述

app.json

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

wxml

<!-- 搜索框 -->        
<view class="searchBox">        <input type="text" name="id" value="{{inputValue}}" />
</view><!-- 语音识别长按键 -->
<view class="{{voiceBtn}}" bindtouchstart="touchStart" bindtouchend="touchEnd">                    <image class="{{voiceStyle}}" src="/images/voice.png"></image>          <text>长按说话</text>        
</view>
<!-- 显示搜索到的垃圾 -->      
<view><view wx:for="{{garSearchList}}" wx:key="item"><view id="{{item.gar_id}}" class="{{searchGar}}">{{item.gar_name}}</view>        </view>      
</view>

js

//获取应用实例
const app = getApp();
//引入插件:微信同声传译
var plugin = requirePlugin("WechatSI")
//获取全局唯一的语音识别管理器recordRecoManager
let manager = plugin.getRecordRecognitionManager()
Page({  
data: {...
,
//微信插件同声传译实现语音识别  
//初始化  
initRecord: function() {    
var that = this;
//有新的识别内容返回,则会调用此事件
manager.onRecognize = function (res) {      
console.log("current result", res.result)
}    
//正常开始录音识别时调用    
manager.onStart = function (res) {
//提示录音开始
wx.showToast({
title: '开始录音',      
})      
console.log("成功开始录音识别", res)    
}    
//识别错误事件    
manager.onError = function (res) {      
console.error("error msg", res.msg)    
}    
//识别结束事件    
manager.onStop = function (res) {      
// console.log("record file path", res.tempFilePath)      
// console.log("result", res.result)            
if(res.result == ''){        
//录音内容为空时      
wx.showModal({
title: '提示',
content: '不好意思,典典没听清',
showCancel: false,
success: function (res) {}        
})
return;      
}     
else{       
//不为空时提示开始识别        
wx.showToast({
title: '正在识别',          
icon: 'loading'        
})        
var text = res.result.replace(/,/, ' ').replace(/。/gi, '');//正则去除识别结果结尾的句号        
//将识别结果显示在输入框        
that.setData({          
inputValue: text        
})        
//调用接口,将识别结果传入后台查找对应垃圾        
var apiRootPath = app.globalData.apiRootPath;  //全局变量表示接口根目录,在app.js的globalData声明
wx.request({          
url: apiRootPath + '文件名.php',          
data: {            
garbageName: text, //需要传入后台的字段
},          
header: {'content-type': 'application/x-www-form-urlencoded'},          
method: 'POST',          
dataType: 'json',          
responseType: 'text',          
//成功调用          
success: function (res) {
var resData = res.data;            
// console.log(resData);            
if (resData.status == "ok") { 
//判断请求状态是否ok              
if (resData.data == null) { 
//如果没有记录               ...
} 
else {
//有记录时
var resList = []; //记录保存到数组中                
//  console.log(resData);                
resData.data.forEach(function (item, index) {   
//item指数组中的每个元素值,index表示索引                  
//console.log(item);                  
resList.push(item);                
});                
that.setData({                  
garSearchList: resList,                  
...              
});              
}            
} 
...  
},          
...        
})//request结束      
}          
} 
},  
//按住说话  
touchStart: function(e){    
this.setData({//用来变换按钮样式
//录音状态      
voiceStyle: "voiceStyleDown"    
})    
//开始识别    
manager.start({      
lang: 'zh_CN',    //识别的语言,目前支持zh_CN en_US zh_HK sichuanhua
duration: 60000, //指定录音的时长,单位ms,最大为60000。如果传入了合法的 duration ,在到达指定的 duration 后会自动停止录音
})  
},  
//松开结束  
touchEnd: function(e){    
this.setData({//用来变换按钮样式         
voiceStyle: "voiceStyle"    
})
//结束识别    
manager.stop();  
},
})
onLoad() {    
var that = this;    
/*识别语音*/    
that.initRecord();  
},

我们的小程序

在这里插入图片描述

这篇关于微信小程序-使用微信同声传译插件实现语音识别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/249236

相关文章

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流(parallelStream)的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS

C++中unordered_set哈希集合的实现

《C++中unordered_set哈希集合的实现》std::unordered_set是C++标准库中的无序关联容器,基于哈希表实现,具有元素唯一性和无序性特点,本文就来详细的介绍一下unorder... 目录一、概述二、头文件与命名空间三、常用方法与示例1. 构造与析构2. 迭代器与遍历3. 容量相关4

Linux join命令的使用及说明

《Linuxjoin命令的使用及说明》`join`命令用于在Linux中按字段将两个文件进行连接,类似于SQL的JOIN,它需要两个文件按用于匹配的字段排序,并且第一个文件的换行符必须是LF,`jo... 目录一. 基本语法二. 数据准备三. 指定文件的连接key四.-a输出指定文件的所有行五.-o指定输出

Linux jq命令的使用解读

《Linuxjq命令的使用解读》jq是一个强大的命令行工具,用于处理JSON数据,它可以用来查看、过滤、修改、格式化JSON数据,通过使用各种选项和过滤器,可以实现复杂的JSON处理任务... 目录一. 简介二. 选项2.1.2.2-c2.3-r2.4-R三. 字段提取3.1 普通字段3.2 数组字段四.

C++中悬垂引用(Dangling Reference) 的实现

《C++中悬垂引用(DanglingReference)的实现》C++中的悬垂引用指引用绑定的对象被销毁后引用仍存在的情况,会导致访问无效内存,下面就来详细的介绍一下产生的原因以及如何避免,感兴趣... 目录悬垂引用的产生原因1. 引用绑定到局部变量,变量超出作用域后销毁2. 引用绑定到动态分配的对象,对象

Linux kill正在执行的后台任务 kill进程组使用详解

《Linuxkill正在执行的后台任务kill进程组使用详解》文章介绍了两个脚本的功能和区别,以及执行这些脚本时遇到的进程管理问题,通过查看进程树、使用`kill`命令和`lsof`命令,分析了子... 目录零. 用到的命令一. 待执行的脚本二. 执行含子进程的脚本,并kill2.1 进程查看2.2 遇到的

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代

Java HashMap的底层实现原理深度解析

《JavaHashMap的底层实现原理深度解析》HashMap基于数组+链表+红黑树结构,通过哈希算法和扩容机制优化性能,负载因子与树化阈值平衡效率,是Java开发必备的高效数据结构,本文给大家介绍... 目录一、概述:HashMap的宏观结构二、核心数据结构解析1. 数组(桶数组)2. 链表节点(Node

Java AOP面向切面编程的概念和实现方式

《JavaAOP面向切面编程的概念和实现方式》AOP是面向切面编程,通过动态代理将横切关注点(如日志、事务)与核心业务逻辑分离,提升代码复用性和可维护性,本文给大家介绍JavaAOP面向切面编程的概... 目录一、AOP 是什么?二、AOP 的核心概念与实现方式核心概念实现方式三、Spring AOP 的关

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储:配置灵活性:编码示例引入依赖:配置ehcache.XML文件:配置