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

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

相关文章

如何使用celery进行异步处理和定时任务(django)

《如何使用celery进行异步处理和定时任务(django)》文章介绍了Celery的基本概念、安装方法、如何使用Celery进行异步任务处理以及如何设置定时任务,通过Celery,可以在Web应用中... 目录一、celery的作用二、安装celery三、使用celery 异步执行任务四、使用celery

使用Python绘制蛇年春节祝福艺术图

《使用Python绘制蛇年春节祝福艺术图》:本文主要介绍如何使用Python的Matplotlib库绘制一幅富有创意的“蛇年有福”艺术图,这幅图结合了数字,蛇形,花朵等装饰,需要的可以参考下... 目录1. 绘图的基本概念2. 准备工作3. 实现代码解析3.1 设置绘图画布3.2 绘制数字“2025”3.3

Jsoncpp的安装与使用方式

《Jsoncpp的安装与使用方式》JsonCpp是一个用于解析和生成JSON数据的C++库,它支持解析JSON文件或字符串到C++对象,以及将C++对象序列化回JSON格式,安装JsonCpp可以通过... 目录安装jsoncppJsoncpp的使用Value类构造函数检测保存的数据类型提取数据对json数

python使用watchdog实现文件资源监控

《python使用watchdog实现文件资源监控》watchdog支持跨平台文件资源监控,可以检测指定文件夹下文件及文件夹变动,下面我们来看看Python如何使用watchdog实现文件资源监控吧... python文件监控库watchdogs简介随着Python在各种应用领域中的广泛使用,其生态环境也

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景:问题描述解决方案:项目场景:从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置:简单、快速、无障碍二、基本功能:从彩色文本到动态交互1. 显示基本内容2. 创建链

springboot整合 xxl-job及使用步骤

《springboot整合xxl-job及使用步骤》XXL-JOB是一个分布式任务调度平台,用于解决分布式系统中的任务调度和管理问题,文章详细介绍了XXL-JOB的架构,包括调度中心、执行器和Web... 目录一、xxl-job是什么二、使用步骤1. 下载并运行管理端代码2. 访问管理页面,确认是否启动成功

使用Nginx来共享文件的详细教程

《使用Nginx来共享文件的详细教程》有时我们想共享电脑上的某些文件,一个比较方便的做法是,开一个HTTP服务,指向文件所在的目录,这次我们用nginx来实现这个需求,本文将通过代码示例一步步教你使用... 在本教程中,我们将向您展示如何使用开源 Web 服务器 Nginx 设置文件共享服务器步骤 0 —

Java中switch-case结构的使用方法举例详解

《Java中switch-case结构的使用方法举例详解》:本文主要介绍Java中switch-case结构使用的相关资料,switch-case结构是Java中处理多个分支条件的一种有效方式,它... 目录前言一、switch-case结构的基本语法二、使用示例三、注意事项四、总结前言对于Java初学者

Golang使用minio替代文件系统的实战教程

《Golang使用minio替代文件系统的实战教程》本文讨论项目开发中直接文件系统的限制或不足,接着介绍Minio对象存储的优势,同时给出Golang的实际示例代码,包括初始化客户端、读取minio对... 目录文件系统 vs Minio文件系统不足:对象存储:miniogolang连接Minio配置Min