Uniapp 小程序：语音播放与暂停功能的实现及优化方案
界面部分
//开启语音
<button class="open" v-if="showPlay==false" @click="playText">这是开启播放的图片</button >//关闭语音
<button class="close" v-if="showPlay==true" @click="stopText">这是关闭播放的图片</button >
播放语音方法 playText
该方法用于处理语音播放的逻辑，包括内容截断、分割、重试机制等。
playText: function() {// 检查是否正在等待响应，如果是则提示用户等待// 切换显示为正在播放状态this.showPlay = true; // 初始化重试次数let retryCount = 0; // 设置最大重试次数const maxRetryTimes = 3; // 重试间隔时间（单位：毫秒）const retryInterval = 2000; // 假设最大允许的内容长度，可根据实际调整const maxContentLength = 100; // 截断内容的函数，如果内容长度超过最大允许长度，则截取前 maxContentLength 个字符const truncateContent = (content) => {if (content.length > maxContentLength) {return content.slice(0, maxContentLength);}return content;};// 分割内容的函数，将长内容按合适的分割符号（。！，？）分割成多个部分const splitContent = (content) => {const parts = [];let start = 0;while (start < content.length) {let end = start + maxContentLength;if (end >= content.length) {parts.push(content.slice(start));break;}// 从后往前查找合适的分割符号（。！，？）let symbolIndices = [content.lastIndexOf('。', end), content.lastIndexOf('!', end), content.lastIndexOf('?', end), content.lastIndexOf(',', end)];symbolIndices = symbolIndices.filter(index => index > start);if (symbolIndices.length > 0) {end = Math.max(...symbolIndices);}parts.push(content.slice(start, end));start = end + 1;}return parts;};// 播放分割后的内容部分的函数const playParts = (parts) => {let index = 0;const playNextPart = () => {if (index < parts.length) {const part = parts[index];const plugin = requirePlugin('WechatSI');// 调用文字转语音插件plugin.textToSpeech({lang: 'zh_CN',tts: true,content: part,success: (res) => {// 创建内部音频上下文并播放音频this.innerAudioContext = uni.createInnerAudioContext();this.innerAudioContext.src = res.filename;this.innerAudioContext.play();// 监听音频播放结束事件，播放下一部分this.innerAudioContext.onEnded(() => {index++;playNextPart();});},fail: (res) => {console.log('文字转语音失败', res);if (retryCount < maxRetryTimes) {retryCount++;console.log(`正在进行第${retryCount}次重试...`);// 重试播放setTimeout(() => playNextPart(), retryInterval);} else {console.log('已达到最大重试次数，文字转语音仍失败');}}});} else {// 所有部分播放完毕，切换显示为可播放状态this.showPlay = false; }};playNextPart();};// 截断内容const truncatedContent = truncateContent(this.readContent);// 分割内容const splitContents = splitContent(this.readContent);if (splitContents.length > 1) {// 如果分割后的内容部分大于 1，则按部分播放playParts(splitContents);} else {// 内容较短，直接播放const retryFn = () => {if (retryCount < maxRetryTimes) {retryCount++;console.log(`正在进行第${retryCount}次重试...`);const plugin = requirePlugin('WechatSI');// 调用文字转语音插件plugin.textToSpeech({lang: 'zh_CN',tts: true,content: truncatedContent,success: (res) => {// 创建内部音频上下文并播放音频this.innerAudioContext = uni.createInnerAudioContext();this.innerAudioContext.src = res.filename;this.innerAudioContext.play();},fail: (res) => {console.log('文字转语音失败', res);// 重试播放setTimeout(retryFn, retryInterval);}});} else {console.log('已达到最大重试次数，文字转语音仍失败');}};const plugin = requirePlugin('WechatSI');// 调用文字转语音插件plugin.textToSpeech({lang: 'zh_CN',tts: true,content: truncatedContent,success: (res) => {// 创建内部音频上下文并播放音频this.innerAudioContext = uni.createInnerAudioContext();this.innerAudioContext.src = res.filename;this.innerAudioContext.play();},fail: (res) => {console.log('文字转语音失败', res);// 重试播放setTimeout(retryFn, retryInterval);}});}
}
暂停语音方法 stopText
该方法用于停止语音播放并释放资源。
stopText() {// 切换显示为可播放状态this.showPlay = false;if (this.innerAudioContext) {// 停止播放this.innerAudioContext.stop(); // 释放资源this.innerAudioContext = null; }
}
页面隐藏和卸载时的处理
在页面隐藏和卸载时，调用 stopText 方法停止语音播放。
onHide() {this.stopText()
},
onUnload() {this.stopText()
}
总结
这段代码实现了语音播放和暂停的功能，通过界面上的按钮触发相应的操作。在播放语音时，会对内容进行截断和分割处理，以适应文字转语音插件的要求。同时，为了提高稳定性，添加了重试机制。在页面隐藏和卸载时，会自动停止语音播放并释放资源。
相关文章：
Uniapp 小程序：语音播放与暂停功能的实现及优化方案
界面部分 //开启语音 <button class"open" v-if"showPlayfalse" click"playText">这是开启播放的图片</button >//关闭语音 <button class"close" v-if"showPlaytrue" click"stopText">这是…...
Python基于机器学习的微博舆情情感分析系统，微博评论情感分析可视化系统（全新升级）
大家好，今天为大家带来的是Python基于机器学习的微博舆情情感分析系统，微博评论情感分析可视化系统，这个系统在原本的系统上进行优化升级。 算法从开源框架的 snlow ，到支持机器学习的 lstm 算法可以手动输入语句，进行…...
IP-------GRE和MGRE
4.GRE和MGRE 1.应用场景 现实场景 居家工作，公司工作，分公司工作----------需要传输交换数据--------NAT---在该场景中需要两次NAT（不安全） 为了安全有两种手段-----1.物理专线---成本高 2.VPN--虚拟专用网---隧道技术--封装技…...
内网综合渗透测试——WinterMute: 1靶场
靶场来源 <WinterMute: 1 ~ VulnHub> Wintermute 虚拟机网络配置指南 本实验涉及网络跳转技术，需正确配置VirtualBox网络。所有IP均为动态分配，配置快速简便。 通过"文件 >> 导入虚拟设备"导入各虚拟机。 STRAYLIGHT (网络#1 和 …...
项目进度管理工具：甘特图与关键路径法（2025实战指南）
在全球数字化转型加速的背景下，项目延期率高达42%的现状倒逼管理者掌握科学的进度管理工具。本文结合2025年最新实践，深度解析甘特图与关键路径法的原理及应用，助你构建精准可控的项目进度管理体系。 一、双剑合璧：工具组合的价值…...
deepseek-r1-centos-本地服务器配置方法
参考： 纯小白 Centos 部署DeepSeek指南_centos部署deepseek-CSDN博客 https://blog.csdn.net/xingxin550/article/details/145574080 手把手教大家如何在Centos7系统中安装Deepseek，一文搞定_centos部署deepseek-CSDN博客 https://blog.csdn.net/soso67…...
C# Unity 唐老狮 No.2 模拟面试题
本文章不作任何商业用途 仅作学习与交流 安利唐老狮与其他老师合作的网站,内有大量免费资源和优质付费资源,我入门就是看唐老师的课程 打好坚实的基础非常非常重要: Unity课程 - 游习堂 - 唐老狮创立的游戏开发在线学习平台 - Powered By EduSoho 如果你发现了文章内特殊的字体…...
一周学会Flask3 Python Web开发-flask3上下文全局变量session,g和current_app
锋哥原创的Flask3 Python Web开发 Flask3视频教程： 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili flask3提供了session,g和current_app上下文全局变量来方便我们操作访问数据。 以下是一个表格，用于比较Flask中的…...
SpringBoot整合Mybatis-Plus+Druid实现多数据源
概述 Spring Boot： Spring Boot是一个基于Spring框架的开源Java开发框架，旨在简化Spring应用程序的开发、配置和部署。它提供了一种快速、敏捷的方式来构建独立的、生产级别的Spring应用程序，同时还提供了许多开箱即用的功能和工具࿰…...
【Mysql】我在广州学Mysql 系列—— 性能优化相关例题
ℹ️大家好，我是练小杰，时间过得真快，还有2天，2025年2月份就结束了！！😆 本文是针对Mysql数据库中有关性能优化的相关示例，通过本文的学习可以深入了解性能优化的各类命令！…...
罗成华教授论腹膜后肿瘤核磁共振检查意义
腹膜后器官很少受生理运动的影响，而MRI又可进行除横断面以外的冠状面、矢状面或其它任意切面检查，其图像清晰，故其特别适用于腹膜后肿瘤的术前检查。早期经验显示MRI可提供比ＣＴ更多的信息，不用造影剂术前即…...
CSS3 圆角：实现与优化指南
CSS3 圆角：实现与优化指南 随着网页设计的发展，CSS3 圆角已经成为了现代网页设计中不可或缺的元素之一。本文将详细讲解 CSS3 圆角的基本用法、实现方式以及优化技巧，帮助您在网页设计中更好地运用这一功能。 一、CSS3 圆角基本用法 1.1 基…...
Windows下不建议使用C/C++运行库的本地化功能
Windows不建议setlocale或使用C的std::locale对象等C/C运行库的本地化功能，因为setlocale或C的std::locale对象实现bug多，不稳定，可能存在兼容性问题，如： 1、DOS/Win16下setlocale只支持"C"的locale 2、Wi…...
python-leetcode-乘积最大子数组
152. 乘积最大子数组 - 力扣（LeetCode） class Solution:def maxProduct(self, nums: List[int]) -> int:if not nums:return 0max_prod nums[0]min_prod nums[0]result nums[0]for i in range(1, len(nums)):if nums[i] < 0:max_prod, min_prod…...
基于YOLO11深度学习的半导体芯片缺陷检测系统【python源码+Pyqt5界面+数据集+训练代码】
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...
Python入门 — 类
面向对象编程中，编写表示现实世界中的事物和情景的类（class），并基于这些类来创建对象（object）。根据类来创建对象称为实例化，这样就可以使用类的实例（instance） 一、创建…...
用langchain实现基于SQL数据构建问答系统(1))
本地大模型编程实战(22)用langchain实现基于SQL数据构建问答系统(1)
使 LLM(大语言模型) 系统能够查询结构化数据与非结构化文本数据在性质上可能不同。后者通常生成可在向量数据库中搜索的文本，而结构化数据的方法通常是让 LLM 编写和执行 DSL（例如 SQL）中的查询。 我们将演练在使用基于 langchain 链 &#x…...
监听其他音频播放时暂停正在播放的音频
要实现当有其他音频播放时暂停当前音频，你可以使用全局事件总线或 Vuex 来管理音频播放状态。这里我将展示如何使用一个简单的事件总线来实现这个功能。 首先，你需要创建一个事件总线。你可以在项目的一个公共文件中创建它，例如 eventBus.js…...
Docker数据卷操作实战
什么是数据卷 数据卷 是一个可供一个或多个容器使用的特殊目录，它绕过 UFS，可以提供很多有用的特性: 数据卷 可以在容器之间共享和享用对 数据卷 的修改立马生效对 数据卷 的更新，不会影响镜像数据卷 默认会一直存在，即时容器被…...
Go中slice和map引用传递误区
背景 关于slice和map是指传递还是引用传递，很多文章都分析得模棱两可，其实在Go中只有值传递，但是很多情况下是因为分不清slice和map的底层实现，所以导致很多人在这一块产生疑惑，下面通过代码案例分析slice和map到底是…...
代码审计入门学习
简介 HadSky轻论坛程序为个人原创PHP系统，作者为蒲乐天，后端基于puyuetianPHP框架驱动，前端基于 puyuetianUI框架驱动，默认编辑器为puyuetianEditor富文本编辑器，其他非原创框架及驱动JQuery.js 及Font-Awesome字体库…...
排序算法（3）：
这是我们的最后一篇排序算法了，也是我们的初阶数据结构的最后一篇了。 我们来看，我们之前已经讲完了插入排序，选择排序，交换排序，我们还剩下最后一个归并排序，我们今天就讲解归并排序，另外我们还…...
AI革命下的多元生态：DeepSeek、ChatGPT、XAI、文心一言与通义千问的行业渗透与场景重构
前言 人工智能技术的爆发式发展催生了多样化的AI模型生态，从通用对话到垂直领域应用，从数据挖掘到创意生成，各模型凭借其独特的技术优势与场景适配性，正在重塑全球产业格局。本文将以DeepSeek、ChatGPT、XAI（可解释人…...
服务端配置TCP探活，超出探活时间后的行为？
server端启动 （完整源码在最后） 配置探活 setsockopt(client_fd, IPPROTO_TCP, TCP_KEEPIDLE, &(int){5}, sizeof(int)); // 空闲60秒后探测setsockopt(client_fd, IPPROTO_TCP, TCP_KEEPINTVL, &(int){10}, sizeof(int)); // 探测间隔10秒…...
Eclipse安装和配置环境教程包含下载、安装、汉化（附安装包）
文章目录 前言一、JDK 安装二、Eclipse IDE 安装三、Eclipse软件汉化（可选）四、安装完成 前言 在编程的世界里，一款好的开发工具能让效率大幅提升，Eclipse 2024 便是这样的利器。不过，其安装过程涉及 JDK 配置、软件本…...
nginx简单命令启动，关闭等
启动命令 #启动nginx start nginx重启命令 比如修改了配置文件，用这个命令重启生效 #重启nginx nginx -s reload3，查看端口占用 #查看端口占用 netstat -aon4，关闭nginx 如果使用cmd命令窗口启动nginx， 关闭cmd窗口是不能…...
SQL------搭建sql靶场和打开sql靶场及报错解决
搭建sql靶场 1.下载安装包与文件 在官网上下载phpstudy网址： http://www.xp.cn 下载sqli-labs的网址： https://github.com/Audi-1/sqli-labs 2.下载小皮面板 打开安装包 安装，记得改自己想要安装的路径 打开php版本 记得下载5.几的版本&…...
对话式AI引擎：DeepSeek技术引领多模态交互新篇章
摘要 DeepSeek技术公司推出了一项创新服务——“对话式AI引擎”，仅需两行代码即可激活任意大型AI模型的语音对话功能。这项技术使得文本型AI模型迅速转变为具备实时语音对话能力的多模态交互模型，解决了大型AI模型在语音交互方面的不足，为AI行…...
在什么情况下需要使用光谱相机呢？
1.需要捕捉不可见光信息时 光谱相机不仅能捕捉可见光，还能记录红外、紫外等波段的光谱信息。以下场景尤其适用： 环境监测：检测水质、空气污染物等肉眼无法观察的物质。 农业监测：分析植物的近红外反射率，判断作物健…...
nnUNetv2用自己的数据集训练推理
有什么不懂的大家可以在评论区问我，我一定会积极回复哒！！！ 一、环境配置 首先创建一个虚拟环境 conda create -n nnunet python3.9 conda activate nnunet 然后在pytorch官网，安装pytorch，这里我安装的是…...
std::thread的同步机制
在 C 中，std::thread 用于创建和管理线程。为了确保多个线程能正确、安全地访问共享资源，避免数据竞争和不一致问题，需要使用同步机制。 互斥锁（std::mutex） 原理：互斥锁是一种最基本的同步原语ÿ…...
Matplotlib 绘图标记
Matplotlib 绘图标记 引言 Matplotlib 是一个功能强大的 Python 绘图库，广泛用于数据可视化。在 Matplotlib 中，绘图标记（markers）是数据点在图表中显示的方式。正确的使用绘图标记可以增强图表的可读性和美观性。本文将详细介绍…...
Web3.py 入门笔记
Web3.py 学习笔记 📚 1. Web3.py 简介 🌟 Web3.py 是一个 Python 库，用于与以太坊区块链进行交互。它就像是连接 Python 程序和以太坊网络的桥梁。 官方文档 1.1 主要功能 查询区块链数据（余额、交易等）发送交易与…...
《论企业集成平台的理解与应用》审题技巧 - 系统架构设计师
企业集成平台的理解与应用——论文写作框架 一、考点概述 本论题“企业集成平台的理解与应用”主要考察的是计算机软件测试工程师对于企业集成平台（EIP）的深入理解以及在实际项目中的应用能力。论题涵盖了以下几个核心内容： 首先ÿ…...
IO 和NIO有什么区别？
IO 与 NIO 的区别详解 Java 中的 IO（Input/Output） 和 NIO（New IO 或 Non-blocking IO） 是两种不同的输入输出处理机制，主要区别体现在设计模型、性能优化和应用场景上。以下是详细对比： 1. 阻塞与非阻塞模…...
音频进阶学习十六——LTI系统的差分方程与频域分析一（频率响应）
文章目录 前言一、差分方程的有理式1.差分方程的有理分式2.因果系统和ROC3.稳定性与ROC 二、频率响应1.定义2.幅频响应3.相频响应4.群延迟 总结 前言 本篇文章会先复习Z变换的有理分式，这是之前文章中提过的内容，这里会将差分方程和有理分式进行结合来看…...
Nginx面试宝典【刷题系列】
文章目录 1、nginx是如何实现高并发的？2、Nginx如何处理HTTP请求？3、使用“反向代理服务器”的优点是什么?4、列举Nginx服务器的最佳用途。5、Nginx服务器上的Master和Worker进程分别是什么?6、什么是C10K问题?7、请陈述stub_status和sub_filter指令的…...
【语法】C++的string
目录 4个默认成员函数 迭代器 string的扩容： capacity(): reserve(): resize()： 插入与删除： c_str: find()和substr: getline(): 在C语言中，要想存储一串字符，往往用的都是char arr[]，也就是字…...
支持selenium的chrome driver更新到133.0.6943.141
最近chrome释放新版本：133.0.6943.141 如果运行selenium自动化测试出现以下问题，是需要升级chromedriver才可以解决的。 selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only s…...
【2025.2.25更新】wordpress免费AI插件，文章内容、图片自动生成、视频自动生成、网站AI客服、批量采集文章，内置deepseek联网满血版
wordpress免费AI插件，文章内容、文章图片、长尾关键词、视频自动生成、网站AI客服、批量采集文章，插件已接入腾讯云大模型知识引擎xDeepSeek，基于腾讯云大模型知识引擎xDeepSeek可联网满血版，插件可实现文章生成、长尾关键词生成、…...
KylinSP3 | 防火墙和麒麟安全增强设置KySec
一、系统防火墙原理 麒麟操作系统从V10版本开始，默认使用了Firewalld防火墙，Firewalld是能提供动态管理的防火墙，支持网络/防火墙区域，用于定义网络连接或接口的信任级别。支持IPv4和IPv6防火墙设置、以太网桥接和IP集。将运行时…...
DeepSeek + Higress AI 网关/Spring AI Alibaba 案例征集
诚挚地感谢每一位持续关注并使用 Higress 和 Spring AI Alibaba 的朋友。我们会持续投入，力图把 Higress 变得更好，把 Higress 和 Spring AI Alibaba 社区和生态变得更加繁荣。 关于 Higress： Higress 除了作为云原生网关支持 Web 应用的部…...
sql server笔记
创建数据库 use master gocreate database stuuuuu//删除数据库if db_id ($$$) is not nullDrop database [$$$] go//新建表USE [studyTest] GOSET ANSI_NULLS ON GOSET QUOTED_IDENTIFIER ON GOCREATE TABLE [dbo].[Table_1]([id] [int] NULL,[name] [varchar](10) NULL ) ON…...
Vue 3 搭建前端模板并集成 Ant Design Vue（2025）
一、环境安装 截止2025.2.6 ，官网发布的vue 3 稳定版本是 V 3.5.13 根据此时的官方文档要求，node 版本需要大于等于 V 18.3 于是使用 nvm 安装 v 20.18.0 二、创建项目 使用 Vue 官方推荐的脚手架 create-vue 快速创建 Vue3 的项目: 快速上手 | Vue.js…...
Word表格中如何只单独调整某一单元格宽度
大家好，我是小鱼。 在日常制作Word表格时，表格中不同单元格有时需要设置不同的宽度，但是很多小伙伴会发现想单独调整某一个单元格宽度时，发现其它单元格宽度也会发生变化。那么，到底怎么才能单独调整某一单元格宽度呢…...
CSS基础选择器和文字属性控制
CSS 层叠样式表(Cascading Style Sheets)，是一种样式表语言，它和HTML一起被用来描述网页的样式。HTML 主要用来定义网页的内容，也就是骨架，CSS 用来定义网页的样式。 CSS 是由选择器和属性声明组成的。选择器用来选择元素&#…...
保护密码等敏感信息的几个常用方法
概述 在生产环境，保护数据库账号密码等敏感信息是至关重要的，这些信息不能被所有研发工程师看见，本文介绍几种避免明文存储的常用方法。 方法1： 使用配置中心加密 适用场景：已采用配置中心（如Spring Clou…...
【Golang 面试题】每日 3 题（六十七）
✍个人博客：Pandaconda-CSDN博客 📣专栏地址：http://t.csdnimg.cn/UWz06 📚专栏简介：在这个专栏中，我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话，欢迎点赞👍收藏…...
JavaScript系列（89）--前端模块化工程详解
前端模块化工程详解 🧩 前端模块化是现代Web开发的核心理念之一，它帮助我们组织和管理日益复杂的前端代码。本文将详细探讨前端模块化工程的各个方面，从基础概念到实际应用。 模块化概述 🌟 💡 小知识：模…...
PDF处理控件Aspose.PDF教程：使用 Python 将 PDF 转换为 TIFF
TIFF文件是高质量图像的首选。它们广泛用于印刷、存档和图形设计。企业通常需要转换PDF文档以获得更好的兼容性。了解如何以编程方式执行此转换可以节省时间和资源。在这篇教程中，我们将探讨如何使用 Python 将 PDF 转换为 TIFF。 本文涵盖以下主题： P…...