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

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

相关文章

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl