当前位置：首页 > news >正文

uniapp微信小程序-长按按钮百度语音识别回显文字

news 来源：原创 2025/6/27 1:06:10

流程图：在这里插入图片描述
话不多说，上代码：

<template><view class="content"><view class="speech-chat" @longpress="startSpeech" @touchend="endSpeech"><view class="animate-block" v-if="voiceState"><view class="dot-ripple"></view><view class="dot-ripple"></view></view><image class="speech-icon" src="/static/aichat/icon-speech.png" mode="aspectFit"></image></view></view>
</template><script lang="ts" setup>
const recorderManager = ref(uni.getRecorderManager()) // 获取全局唯一的录音管理器
// 这俩有啥用？
const innerAudioContext = uni.createInnerAudioContext() // 创建并返回内部audio上下文对象
innerAudioContext.autoplay = true // 开启自动播放设置const voicePath = ref<string>('') // 语音文件路径
const result = ref<string>('') // 语音识别结果
const voiceState = ref<boolean>(false) // 语音输入状态
const authState = ref<boolean>(false) // 录音授权状态
const bdData = reactive({pid: '你的pid',cuid: '你的cuid',token: '你的token',voiceUrl: 'https://vop.baidu.com/server_api',
})const emit = defineEmits(['speech-result'])// 初始化录音配置
const initRecorder = () => {recorderManager.value.onStart(() => {// console.log('录音开始')})recorderManager.value.onStop((res) => {readFile(res.tempFilePath) // 文件读取事件voicePath.value = res.tempFilePath})
}
/*** @param {*} voiceFilePath 文件流路径* @desc 文件流或文件路径获取*/
const readFile = (voiceFilePath) => {// 通过全局唯一的<文件管理器>读取文件信息uni.getFileSystemManager().readFile({filePath: voiceFilePath,success: (res) => {//   console.log('文件编码成功', res)getRecognizeResult(res.data) // 调用百度语言识别API},fail: (err) => {// console.log('文件编码失败', err)return err},})
}
/*** @param {*} speechResult 文件流路径* @desc 百度语音识别获取*/
const getRecognizeResult = (speechResult) => {const questUrl = `${bdData.voiceUrl}?cuid=${bdData.cuid}&token=${bdData.token}&dev_pid=${bdData.pid}`uni.request({url: questUrl,method: 'POST',header: {'Content-Type': 'audio/pcm;rate=16000', // 注意这个header用于设置音频文件格式和码率},data: speechResult,success: (res) => {console.log('请求成功', res)result.value = res.data.result[0]emit('speech-result', res.data.result[0])},fail: (err) => {console.log('请求失败', err)uni.showToast({title: '语言识别异常，稍后重试',icon: 'error',duration: 2000,})},complete: () => {voiceState.value = false},})
}
const startRecord = () => {// 开始录音并设置格式recorderManager.value.start({format: 'PCM',})
}
/*** @desc 长按触发录音*/
const startSpeech = (e) => {// 震动提示用户--不一定生效uni.vibrateLong({success: function () {//   console.log('success')},})// 已经授权 则开始录音if (authState.value) {voiceState.value = truestartRecord()return}// 未授权--主要用于检查用户是否已授权某些敏感权限（如录音、摄像头、位置等）uni.getSetting({success(settingRes) {// 未授权if (!settingRes.authSetting['scope.record']) {// 只保留一种授权方式，避免重复弹框uni.authorize({scope: 'scope.record',success() {authState.value = truevoiceState.value = truestartRecord()},fail() {// 用户拒绝授权后，引导进入设置页面开启授权uni.showModal({title: '提示',content: '需要录音权限才能使用语音识别功能',confirmText: '去设置',success(res) {if (res.confirm) {uni.openSetting({success(res) {if (res.authSetting['scope.record']) {authState.value = truevoiceState.value = truestartRecord()}},})}},})},})} else {authState.value = truevoiceState.value = truestartRecord()}},})
}
/*** @desc 检查录音授权状态*/
const checkRecordAuth = () => {// 获取应用的权限设置uni.getSetting({success(res) {// 如果已经授权录音权限，更新状态if (res.authSetting['scope.record']) {authState.value = true}},})
}
const endSpeech = (e) => {// 只有在录音状态时才停止录音if (voiceState.value) {voiceState.value = false// 结束录音recorderManager.value.stop()}
}onMounted(() => {// 初始化录音管理器initRecorder()// 初始化检查录音权限状态checkRecordAuth()
})
</script><style lang="scss" scoped>
.speech-chat {position: relative;bottom: 0;left: 50%;box-sizing: border-box;width: 140rpx;height: 140rpx;border-radius: 30rpx;transform: translateX(-50%);image {box-sizing: border-box;width: 140rpx;height: 140rpx;border-radius: 50%;}
}
.speech-icon {position: absolute;z-index: 2;
}
/* 波纹动画容器 */
.dot-ripple {position: absolute;top: 40%; /* 定位到父容器垂直中点 *//* 新增居中代码 */left: 50%; /* 定位到父容器水平中点 */z-index: 1;width: 20rpx;height: 20rpx;background-color: #ff4200;border-radius: 50%;box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3) inset;transform: translate(-50%, -50%); /* 自身尺寸反向位移50% */animation: ripple 1s ease infinite;
}
/* 动画定义 */
@keyframes ripple {0% {width: 0;height: 0;opacity: 0.75;transform: translate(-50%, -50%) scale(0); /* 保持居中缩放 */}100% {width: 280rpx;height: 280rpx;opacity: 0;transform: translate(-50%, -50%) scale(1); /* 保持居中放大 */}
}
/* 小程序兼容 */
/* #ifdef MP-WEIXIN */
.dot-ripple {transform: translateZ(0); /* 触发硬件加速 */
}
/* #endif */
.dot-ripple:nth-child(2) {animation-delay: 0.2s;
}
</style>

uniapp微信小程序-长按按钮百度语音识别回显文字

流程图： 话不多说，上代码： <template><view class"content"><view class"speech-chat" longpress"startSpeech" touchend"endSpeech"><view class"animate-block" …...

编程日记 2025/6/27 1:06:10

支付宝创建商家订单收款码（统一收单线下交易预创建）.net开发的软件附带大型XML文件可以删除吗？AlipaySDKNet.OpenAPI.xml

支付宝创建商家订单收款码（统一收单线下交易预创建）一个程序55MB，XML就带了35MB AlipaySDKNet.OpenAPI.xml，BouncyCastle.Crypto.xml 支付宝店铺收款码创建的程序，这些文件可以不用吗在支付宝店铺收款码创建的程序中…...

编程日记 2025/6/25 19:20:16

Profinet转Ethernet/IP网关模块通信协议适配配置

案例背景在某自动化生产车间中，现有控制系统采用了西门子 S7 - 1500 PLC 作为主要控制器，负责生产流程的核心控制。同时，由于部分设备的历史原因，存在使用 AB 的 PLC 进行特定环节控制的情况。为了实现整个生产系统的信息交互与…...

编程日记 2025/6/26 19:31:48

4.6/Q1，GBD数据库最新文章解读

文章题目：Global burden, subtype, risk factors and etiological analysis of enteric infections from 1990-2021: population based study DOI：10.3389/fcimb.2025.1527765 中文标题：1990-2021 年肠道感染的全球负担、亚型、危险因素和病因…...

编程日记 2025/6/27 0:26:22

数字孪生技术：开启未来的“镜像”技术

想象一下，你拥有一个与现实世界一模一样的 “数字分身”，它不仅长得像你，行为举止、思维方式也和你毫无二致，甚至能提前预知你的下一步行动。这听起来像是科幻电影里的情节，但数字孪生技术却让它在现实中成为了可能。数…...

编程日记 2025/6/26 22:22:40

Java 序列化（Serialization）

一、理论说明 1. 序列化的定义 Java 序列化是指将对象转换为字节流的过程，以便将其存储到文件、数据库或通过网络传输。反序列化则是将字节流重新转换为对象的过程。通过实现java.io.Serializable接口，类可以被标记为可序列化的，该接口是一…...

编程日记 2025/6/26 3:39:46

Python解析Excel入库如何做到行的拆分

我们读取解析Excel入库经常会遇到这种场景，那就是行的拆分，如图： 比如我们入库，要以name为主键，可是表格name的值全是以逗号分割的多个，这怎么办呢？这就必须拆成多行了啊。代码如下&#xff…...

编程日记 2025/6/24 8:35:45

信创国产化监控 | 达梦数据库监控全解析

达梦数据库（DM Database）是国产数据库的代表产品之一，在政府、金融、电信、能源等多个关键行业应用广泛，它具有高兼容性、高安全性、高可用性、高性能、自主可控等特点。随着国产化替代进程加速，达梦数据库在关键信息基…...

编程日记 2025/6/21 5:23:07

Parsec解决PnP连接失败的问题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、准备环境二、DMZ三、端口映射1.Parsec设置固定端口2.路由器设置端口转发3.重启被控端Parsec四、多少一句1.有光猫管理员账号2.没有光猫管理员账号总结前言…...

编程日记 2025/6/25 8:44:48

LLM笔记（二）LLM数据基础

核心目标: 构建 LLM 的数据基础，将原始文本转化为模型可处理的、包含丰富语义和结构信息的数值形式。一、环境与库准备 (Environment & Libraries): 必要库确认: 在开始之前，确保 torch (PyTorch深度学习框架) 和 tiktoken (OpenAI的高效BPE分词…...

编程日记 2025/6/25 15:49:01

public class ThreadWait {private static final Object lock = new Object();private static boolean t1Output=true;private static boolean t2Output=false;private static boolean t3Output=false;public static void main(String[] args) {//线程1new Thread(new Runnable…...

编程日记 2025/6/24 10:25:34

2、ubantu系统配置OpenSSH | 使用vscode或pycharm远程连接

1、OpenSSH介绍 OpenSSH（Open Secure Shell）是一套基于SSH协议的开源工具，用于在计算机网络中提供安全的加密通信。它被广泛用于远程系统管理、文件传输和网络服务的安全隧道搭建，是保护网络通信免受窃听和攻击的重要工具。 1.1…...

编程日记 2025/6/22 9:10:28

idea启动报错：java: 警告: 源发行版 11 需要目标发行版 11（亲测解决）

引起原因 idea的jdk没有替换干净 1.配置project file–Project Structrue–Project 2.配置Modules-Sources file–Project Structrue–Modules-Sources 改为jdk11 3.配置Modules-Dependencies file–Project Structrue–Modules-Dependencies...

编程日记 2025/6/24 4:28:14

Pycharm IDEA加载大文件时报错:The file size exceeds configured limit

解决方案：配置一下idea.properties文件文件里面写入代码： idea.max.intellisense.filesize50000重启IDEA即可；...

编程日记 2025/6/24 14:18:41

视频分辨率增强与自动补帧

一、视频分辨率增强 1.传统分辨率增强方法传统的视频分辨率增强方法主要基于插值技术。这些方法通过对低分辨率视频帧中已知像素点的分布规律和相邻像素之间的相关性进行分析，在两者之间插入新的像素点以达到增加视频分辨率的目的。例如，最近邻插值算…...

编程日记 2025/6/23 19:33:35

深度学习让鱼与熊掌兼得

通常,一个大的复杂的模型的loss会低,但是拟合方面不够,小的模型在拟合方面更好,但是loss高,我们可以通过深度学习来得到一个有着低loss的小模型我们之前学过,peacewise linear可以用常数加上一堆这个阶梯型函数得到,然后因为peacewise linear可以逼近任何function,所以理论上…...

编程日记 2025/6/20 16:35:46

面试 Linux 运维相关问题

标题Q1Shell脚本是什么、它是必需的吗? Shell脚本是一种用于自动化执行命令行任务的脚本程序，通常运行在Unix/Linux系统的Shell环境中（如Bash）。它通过将多个命令、逻辑控制（如条件判断、循环）和系统功能整合到一个文…...

编程日记 2025/6/24 8:21:20

阿里巴巴 1688 数据接口开发指南：构建自动化商品详情采集系统

在电商行业数据驱动决策的趋势下，高效获取商品详情数据成为企业洞察市场、优化运营的关键。通过阿里巴巴 1688 数据接口构建自动化商品详情采集系统，能够快速、精准地采集海量商品信息。本文将从开发准备、接口分析、代码实现等方面，详细介绍…...

编程日记 2025/6/25 10:34:12

python的宫崎骏动漫电影网站管理系统

目录技术栈介绍具体实现截图系统设计研究方法：设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示技术栈介绍 Django-SpringBoot-php-Node.js-flask 本课题的研究方法和研究步骤基本合理，难度适中&#xf…...

编程日记 2025/6/22 12:40:16

答题pk小程序道具卡的获取与应用

道具卡是答题PK小程序中必不可少的一项增加趣味性的辅助应用，那么道具卡是如何获取与应用的呢，接下来我们来揭晓答案： 一、道具卡的获取： 签到获取：在每日签到中签到不仅可获得当日的签到奖励积分，同时连…...

编程日记 2025/6/25 2:06:31

从零开始创建一个 Next.js 项目并实现一个 TodoList 示例

Next.js 是一个基于 React 的服务端渲染框架，它提供了很多开箱即用的功能，如自动路由、API 路由、静态生成、增量静态再生等。本文将带你一步步创建一个 Next.js 项目，并实现一个简单的 TodoList 功能。效果地址 🧱 安装 Next.j…...

编程日记 2025/6/24 16:50:27

全面掌握JSR303校验：从入门到实战

一、JSR303校验简介 JSR303是Java EE 6中的一项规范，全称为"Bean Validation 1.0"，它定义了一套基于注解的JavaBean校验机制。通过简单的注解，我们可以优雅地完成参数校验工作，避免在业务代码中编写大量的校验逻辑。 …...

编程日记 2025/6/22 11:44:27

「Java EE开发指南」如何使用MyEclipse的可视化JSF编辑器设计JSP？（二）

Visual JSF Designer（可视化JSF设计器）的目标是使创建JSF应用程序的特定于组件工作更容易可视化，在本教程中，您将使用可视化设计器设计JSF登录页面。您将学习如何： 创建一个JSF项目创建一个新的JSF页面设计JSF页面该…...

编程日记 2025/6/24 23:12:54

Python 翻译词典小程序

一、概述本工具是基于Python开发的智能翻译系统，采用有道词典进行翻译，并具有本地词典缓存以及单词本功能。版本号：v1.0 (2025-05-15) 二、核心功能说明 1. 基础翻译功能即时翻译：输入英文单词自动获取中文释义词性识别&…...

编程日记 2025/6/23 22:11:42

kafka调优

以下是 Kafka 性能调优的核心策略与参数配置建议，综合生产环境和硬件层面的优化方案，覆盖生产者、消费者、Broker 三个关键组件： 一、生产者调优批量发送优化 • batch.size：增大批量消息大小（默认 16KB，建…...

编程日记 2025/6/25 22:57:05

【hadoop】sqoop案例 hive-＞mysql

将temperature.log中的气象数据导入到Hive的temperature表中， 根据气象站id分组计算每个气象站30年来的*最高*气温， 然后将统计结果导出到MySQL当中。思路： 1.在hive中创建表 2.数据导入到表中 3.计算后的结果写入另外的表 4.用sqoop导出…...

编程日记 2025/6/23 4:51:21

Git/GitLab日常使用的命令指南来了！

在 GitLab 中拉取并合并代码的常见流程是通过 Git 命令来完成的。以下是一个标准的 Git 工作流，适用于从远程仓库（如 GitLab）拉取代码、切换分支、合并更新等操作。 🌐 一、基础命令：拉取最新代码 # 拉取远程仓库的所…...

编程日记 2025/6/25 3:25:42

遗传算法求解旅行商问题分析

目录一、问题分析二、实现步骤 1）初始化种群 2）计算适应度 3）选择操作 4）交叉操作 5）变异操作三、求解结果四、总结本文通过一个经典的旅行商问题，详细阐述在实际问题中如何运用遗传算法来进…...

编程日记 2025/6/24 20:18:38

【Hadoop】伪分布式安装

【Hadoop】伪分布式安装什么是 Hadoop 伪分布式安装？ Hadoop 伪分布式安装（Pseudo-Distributed Mode） 是一种在单台机器上模拟分布式集群环境的部署方式。它是介于本地模式（Local Mode） 和完全分布式模式&#xf…...

编程日记 2025/6/24 0:15:53

微服务概述

什么是微服务微服务是一个架构方案，属于分布式架构的一种。微服务提倡将模块以独立服务的方式独立管理，整个项目依靠多个小型的服务（单独进程）同时运作来支撑，单个服务只关注自己的业务实现并且有专业的团队进行开发。服务之间使用轻量的协议进行消息传送，并且对于单个…...

编程日记 2025/6/24 19:28:55

【网工】华为配置基础篇①

目录 ■华为设备登录配置 ■VLAN与VLANIF地址配置 ■DHCP配置命令 ■ACL访问控制列表配置 ■NAT地址转换配置 ■华为设备登录配置 <AR> system-view //进入系统模式 [AR]sysname Huawei //设备命名为Huawei [Huawei] telnet server enable //开启设备telnet功…...

编程日记 2025/6/25 1:22:09

React19源码系列之 Diff算法

在之前文章中root.render执行的过程，beginWork函数是渲染过程的核心，其针对不同类型的fiber进行不同的更新处理，在FunctionComponent（函数组件）中，会针对新旧fiber进行对比处理生成新fiber。因此此次就详细…...

编程日记 2025/6/25 5:10:16

华为2024年报：鸿蒙生态正在取得历史性突破

华为于2025年03月31日发布2024年年度报告。报告显示，华为经营结果符合预期，实现全球销售收入 8,621 亿元人民币，净利润 626 亿元人民币。2024 年研发投入达到 1,797 亿元人民币，约占全年收入的 20.8%，近十年累计投入的…...

编程日记 2025/6/24 11:09:33

如何在Firefox火狐浏览器里-安装梦精灵AI提示词管理工具

第一步：进入《梦精灵跨平台AI提示词管理工具》官网梦精灵跨平台AI提示词管理助手 - 官网梦精灵是一款专为AI用户打造的跨平台提示词管理插件，支持一键收藏、快速复制、智能分类等功能，适用于即梦、豆包、Kimi、DeepSeek等多个AI平台&…...

编程日记 2025/6/24 17:16:16

【鸿蒙开发】性能优化

语言层面的优化使用明确的数据类型，避免使用模糊的数据类型，例如ESObject。使用AOT模式 AOT就是提前编译，将字节码提前编译成机器码，这样可以充分优化，从而加快执行速度。未启用AOT时，一边运行一边进…...

编程日记 2025/6/25 6:05:56

Makefile与CMake

一、Makefile 核心内容 1. Makefile 基础结构与工作原理三要素： 目标（Target）：要生成的文件或执行的操作（如可执行文件、清理操作）。依赖（Dependency）：生成目标所需的…...

编程日记 2025/6/25 7:28:18

P8803 [蓝桥杯 2022 国 B] 费用报销

P8803 [蓝桥杯 2022 国 B] 费用报销 - 洛谷题目描述小明在出差结束后返回了公司所在的城市，在填写差旅报销申请时，粗心的小明发现自己弄丢了出差过程中的票据。为了弥补小明的损失，公司同意小明用别的票据进行报销，但是公司财…...

编程日记 2025/6/26 4:40:42

11 web 自动化之 DDT 数据驱动详解

文章目录一、DDT 数据驱动介绍二、实战一、DDT 数据驱动介绍数据驱动： 现在主流的设计模式之一（以数据驱动测试） 结合 unittest 框架如何实现数据驱动？ ddt 模块实现数据驱动的意义： 通过不同的数据对同一脚本实现…...

编程日记 2025/6/25 7:28:22

15：00开始面试，15：06就出来了，问的问题有点变态。。。

从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到4月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%…...

编程日记 2025/6/24 13:08:41

深入理解浏览器渲染引擎：底层机制与性能优化实战

现代浏览器背后是一个庞大而复杂的系统工程，渲染引擎作为核心模块之一，承担着从解析 HTML/CSS 到最终绘制页面的关键职责。本文将从底层机制出发，系统梳理渲染引擎（如 Blink）工作原理、V8 与渲染流程的协作方式&#x…...

编程日记 2025/6/23 9:57:29

【LeetCode 热题 100】56. 合并区间 —— 一文弄懂排序+遍历经典解法（附Python代码）

📌 题目链接 LeetCode 56. 合并区间 📖 一、引言：区间合并，刷题路上的绊脚石？区间类问题是算法面试中常见的经典题型，尤其是“合并区间”问题，考察你对排序、区间重叠判断及边界处理的理解和编码能力。很多同学在面对这题时，容易卡在：什么时候两个区间算重叠？…...

编程日记 2025/6/22 16:47:33

使用Mathematica绘制Clifford奇异吸引子

Clifford Attractors 是一种由微分方程生成的混沌吸引子，参数a,b,c,d不同会产生不同的分形图案。这类吸引子属于迭代函数系统，通过不断迭代参数方程来生成复杂的图形。其数学基础可能与 Clifford 代数或高维函数理论相关，例如 Clifford 代数…...

编程日记 2025/6/26 2:41:52

各个历史版本mysql/tomcat/Redis/Jdk/Apache下载地址

mysql 各版本下载地址： https://downloads.mysql.com/archives/community/ **************************************************************** tomcat 各版本下载地址： https://archive.apache.org/dist/tomcat/ ********************************…...

编程日记 2025/6/25 15:14:16

全面解析机器学习与深度学习中的模型权重文件格式与应用场景

概述随着机器学习和人工智能技术的飞速发展，高效且安全地存储、共享和部署训练有素的模型的方法变得越来越重要。模型权重文件格式在这个过程中发挥着关键作用。这些格式不仅保存了模型的学习参数，还能够实现可复现性，并且便于在各种不同环…...

编程日记 2025/6/25 1:08:30

鸿蒙OSUniApp 实现的地图定位与导航功能#三方框架 #Uniapp

UniApp 实现的地图定位与导航功能随着移动互联网的发展，地图定位与导航功能已成为众多应用的标配。本文将详细介绍如何在 UniApp 框架下实现地图定位与导航功能，并探讨如何适配鸿蒙系统，助力开发者打造更加流畅的地图体验。前言最近在做一…...

编程日记 2025/6/23 22:55:27

【HarmonyOS 5】鸿蒙星闪NearLink详解

【HarmonyOS 5】鸿蒙星闪NearLink详解一、前言鸿蒙星闪NearLink Kit 是 HarmonyOS 提供的短距离通信服务，支持星闪设备间的连接、数据交互。例如，手机可作为中心设备与外围设备（如鼠标、手写笔、智能家电、车钥匙等）通过星闪进…...

编程日记 2025/6/26 23:37:01

Java并发编程面试题总结

目录线程有哪几种状态?状态如何流转? 创建线程的方式? 多线程有什么应用? 线程池的好处? 线程池的七个参数? 为什么不推荐使用jdk的Executors创建线程池? 线程池的执行流程? 任务拒绝策略有哪些，怎么选择? 线程池的核心线程数和最大线程数怎么设定…...

编程日记 2025/6/22 1:53:47

LAMP项目部署实战

一、LAMP部署前期准备 1.1 关闭防火墙 # systemctl stop firewalld # systemctl disable firewalld 1.2 关闭SELinux SELinux(Security-EnhancedLinux)是美国国家安全局（NSA）对于强制访问控制的实现，是Linux历史上最杰出的新安全子系统。 …...

编程日记 2025/6/25 13:56:04

Dify与n8n全面对比指南：AI应用开发与工作流自动化平台选择【2025最新】

Dify与n8n全面对比指南：AI应用开发与工作流自动化平台选择【2025最新】随着AI技术与自动化工具的迅速发展，开发者和企业面临着多种平台选择。Dify和n8n作为两个备受关注的自动化平台，分别专注于不同领域：Dify主要面向AI应用开发&…...

编程日记 2025/6/24 14:44:43

VBA_NZ系列工具NZ10：VBA压缩与解压工具

我的教程一共九套及VBA汉英手册一部，分为初级、中级、高级三大部分。是对VBA的系统讲解，从简单的入门，到数据库，到字典，到高级的网抓及类的应用。大家在学习的过程中可能会存在困惑，这么多知识点该如何组织…...

编程日记 2025/6/23 18:01:31

相关文章：