微信小程序mp3音频播放组件，仅需传入url即可
// index.js
// packageChat/components/audio-player/index.js
Component({/*** 组件的属性列表*/properties: {/*** MP3 文件的 URL*/src: {type: String,value: '',observer(newVal, oldVal) {if (newVal !== oldVal && newVal) {// 如果 InnerAudioContext 已存在，先停止并销毁它以避免多个实例if (this.innerAudioContext) {this.innerAudioContext.stop()this.innerAudioContext.destroy()this.innerAudioContext = null}// 初始化音频并获取时长this.initializeAudio()}}}},/*** 组件的初始数据*/data: {playStatus: 0, // 0: 未播放, 1: 正在播放duration: 0, // 音频总时长（秒）remain: 0 // 剩余播放时间（秒）},/*** 组件生命周期*/lifetimes: {attached() {if (this.data.src) {this.initializeAudio()}},detached() {// 组件卸载时，停止并销毁 InnerAudioContextif (this.innerAudioContext) {this.innerAudioContext.stop()this.innerAudioContext.destroy()this.innerAudioContext = null}}},/*** 组件的方法列表*/methods: {/*** 播放按钮点击事件*/playBtn() {const { src, playStatus } = this.dataif (!src) {wx.showToast({title: '没有录音文件',icon: 'none'})return}// 如果 InnerAudioContext 尚未创建，初始化它if (!this.innerAudioContext) {this.initializeAudio()}// 如果当前正在播放，停止播放并重置状态if (playStatus === 1) {this.innerAudioContext.stop()this.setData({playStatus: 0,remain: this.data.duration})return}// 每次点击都重新开始播放this.innerAudioContext.src = srcthis.innerAudioContext.play()// 更新播放状态this.setData({playStatus: 1,remain: this.data.duration})},/*** 初始化 InnerAudioContext 并绑定事件*/initializeAudio() {this.innerAudioContext = wx.createInnerAudioContext()this.innerAudioContext.obeyMuteSwitch = falsethis.innerAudioContext.src = this.data.src// 监听音频能够播放时触发this.innerAudioContext.onCanplay(() => {console.log('音频可以播放')const totalDuration = Math.floor(this.innerAudioContext.duration)if (totalDuration > 0) {this.setData({duration: totalDuration,remain: totalDuration})} else {console.warn('无法获取音频时长')}})// 监听播放开始this.innerAudioContext.onPlay(() => {console.log('音频开始播放')})// 监听播放结束this.innerAudioContext.onEnded(() => {console.log('音频播放结束')this.setData({playStatus: 0,remain: this.data.duration})// 触发自定义事件（如果需要）this.triggerEvent('playComplete')})// 监听播放错误this.innerAudioContext.onError(err => {console.error('播放错误：', err)wx.showToast({title: '播放失败，请重试',icon: 'none'})this.setData({playStatus: 0,remain: this.data.duration})})// 监听播放进度更新this.innerAudioContext.onTimeUpdate(() => {const current = Math.floor(this.innerAudioContext.currentTime)const remain = Math.floor(this.innerAudioContext.duration) - currentthis.setData({remain: remain > 0 ? remain : 0})})}}
})
<view class="voice-msg" bindtap="playBtn"><imagesrc="{{ playStatus === 0 ? '/sendingaudio.png' : '/voice.gif' }}"mode="aspectFill"class="voice-icon"/><text class="voice-msg-text"> {{ playStatus === 1 ? (remain + "''") : (duration + "''") }} </text>
</view>
/* packageChat/components/audio-player/index.wxss */
.voice-msg {display: flex;align-items: center;min-width: 200rpx;padding: 0 20rpx;height: 60rpx;background-color: rgba(149, 236, 105, 0.72);border-radius: 10rpx;box-shadow:0 3rpx 6rpx rgba(0, 0, 0, 0.13);.voice-icon {transform: rotate(180deg);width: 22rpx;height: 32rpx;}.voice-msg-text {margin-left: 10rpx;color:#000000 !important;font-size:30rpx !important;}
}
相关文章：
微信小程序mp3音频播放组件，仅需传入url即可
// index.js // packageChat/components/audio-player/index.js Component({/*** 组件的属性列表*/properties: {/*** MP3 文件的 URL*/src: {type: String,value: ,observer(newVal, oldVal) {if (newVal ! oldVal && newVal) {// 如果 InnerAudioContext 已存在&…...
Hadoop3.x 万字解析，从入门到剖析源码
💖 欢迎来到我的博客！ 非常高兴能在这里与您相遇。在这里，您不仅能获得有趣的技术分享，还能感受到轻松愉快的氛围。无论您是编程新手，还是资深开发者，都能在这里找到属于您的知识宝藏，学习和成长…...
mysql的一些函数及其用法
mysql 1-来自于leetcode1517的题目 表: Users------------------------ | Column Name | Type | ------------------------ | user_id | int | | name | varchar | | mail | varchar | ------------------------已知一个表，它的…...
[java基础]LinkedList源码粗析
LinkedList 的数据结构 实现List、Deque 接口，基于 双向链表实现的列表。与基于数组的 ArrayList 不同，基于链表的LinkedList 允许在列表的任何位置快速地插入和删除元素。 Java中LinkedList实现了Deque，它提供了 add, offer, remove, poll, …...
基于Spring Boot的海滨体育馆管理系统的设计与实现
风定落花生，歌声逐流水，大家好我是风歌，混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的海滨体育馆管理系统的设计与实现。项目源码以及部署相关请联系风歌，文末附上联系信息 。 项目简介： 宠物医院…...
易支付二次元网站源码及部署教程
易支付二次元网站源码及部署教程 引言 在当今数字化时代，二次元文化逐渐成为年轻人生活中不可或缺的一部分。为了满足这一庞大用户群体的需求，搭建一个二次元主题网站显得尤为重要。本文将为您详细介绍易支付二次元网站源码的特点及其部署教程…...
json序列化时，默认遇到中文会转换成unicode，如果想要保留中文怎么办？
在使用 Python 的 json 模块进行序列化时，默认情况下会将中文转换为 Unicode 编码。如果你希望在序列化时保留中文，可以通过设置 ensure_asciiFalse 来实现。 以下是示例代码： import jsondata {"name": "李浩瑞", &q…...
Perl语言的循环实现
Perl语言的循环实现 引言 Perl是一种强大的脚本语言，以其灵活的语法和强大的文本处理能力著称。无论是在系统管理、网络编程，还是在Web应用开发中，Perl都广泛应用于各种领域。循环是编程语言中一个极其重要的概念，它允许程序重复…...
IOMMU PT
什么是 IOMMU PT IOMMU PT（Input/Output Memory Management Unit - Pass-Through）是一种技术，主要用于虚拟化环境中，特别是在使用直接设备分配（也称为设备直通）的情况下。这项技术允许虚拟机直接访问物理硬…...
DNS协议漏洞利用实验_hust计算机网络安全实验
文章目录 计算机网络安全实验 DNS协议漏洞利用实验 docker使用 建立实验环境docker常用指令 一些注意事项设置本地 DNS 服务器 配置用户计算机设置本地DNS服务器在本地 DNS 服务器中建一个区域 修改主机文件（可略）netwox实施DNS的用户响应欺骗攻击netwo…...
深度学习中的卷积和反卷积（二）——反卷积的介绍
1 简介 反卷积（deconvolution）又称转置卷积，是卷积的拟操作，常用于GAN等模型中。反卷积是上采样的一种，上采样是指将特征图维度恢复到原始图的维度，这种增大维度的过程被称为上采样。上采样可以用插值或反…...
PyCharm 引用其他路径下的文件报错 ModuleNotFound 或报红
PyCharm 中引用其他路径下的文件提示 ModuleNotFound，将被引用目录添加到系统路径： # # 获取当前目录 dir_path os.path.dirname(os.path.realpath(__file__)) # # 获取上级目录 parent_dir_path os.path.abspath(os.path.join(dir_path, os.pardir))…...
【人工智能】Transformers之Pipeline（二）：自动语音识别（automatic-speech-recognition）
目录 一、引言 二、自动语音识别（automatic-speech-recognition） 2.1 概述 2.2 技术原理 2.2.1 whisper模型 2.2.2 Wav2vec 2.0模型 2.3 pipeline参数 2.3.1 pipeline对象实例化参数 2.3.2 pipeline对象使用参数…...
Linux 工作队列
系列文章目录 Linux内核学习 Linux 知识（1） Linux 知识（2） Linux 工作队列 Linux 内核源代码情景分析（一） Linux 设备驱动程序（二） 文章目录 系列文章目录综述工作（work_…...
程序血缘分析技术在工商银行软件工程中的应用
当前，随着软件领域技术更新换代速度的日益加快，市场需求也变得更加多样化和个性化，业界普遍通过加速产品迭代来满足客户需求，但在此过程中也暴露出一些研发管理痛点问题，如服务和程序类资产信息分散于各个不同的应用和系统中，信息归集费时费力；设计、开发和测试人员无法…...
纯手工（不基于maven的pom.xml、Web容器）连接MySQL数据库的详细过程（Java Web学习笔记）
1 引言 最近读一些Java Web开发类的书籍时，发现书中的连接数据库的过程缺少了一些关键性的过程，这对初学者非常不友好。为此，本文将给出详细的连接MySQL数据库的过程，并且是纯手工，不依赖于pom.xml和Web容器ÿ…...
node-sass@4.14.1报错的最终解决方案分享
输入npm i全安装文件所需的依赖的时候，博主是使用sass去书写的，使用的是node-sass4.14.1和sass-loader7.3.1的版本的，安装的时候老是出现错误， node-sass4.14.1版本不再被支持的原因 node-sass 是一个基于 LibSass 的 Node.js 绑…...
腾讯云AI代码助手编程挑战赛-厨房助手之AI大厨
腾讯云AI代码助手编程挑战赛-厨房助手之AI大厨 作品简介 身处当今如火箭般迅猛发展的互联网时代，智能聊天助手已然化身成为提升用户体验的关键利器，全方位渗透至人们的数字生活。 紧紧跟随着这股汹涌澎湃的时代浪潮，我毅然投身于极具挑战性…...
【Linux系列】如何使用 nohup 命令在后台运行脚本
💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
Web渗透测试之XSS跨站脚本攻击 跨域是什么？同源机制又是什么？ cors以及Jsonp是什么 一篇文章给你说明白
目录 Cookie的Httponly属性和逃过方式 浏览器同源机制 cors跨域和jsonp跨域和跨域标签 Cors跨域 - 跨源 Jsonp 跨域 jsonp跨域原理： 说明: Cookie的Httponly属性和逃过方式 Xss攻击手段 最常用的目的获取cookie Cookie中设置了 httponlyTrue 方式js操作获…...
K-Means 聚类算法：用生活场景讲解机器学习的“分组”方法
一、K-Means 算法概述 K-Means 是一种经典的无监督学习聚类算法，目的是将数据集中 n 个样本划分成 K 个簇（cluster），每个样本根据其特征被归入与之最接近的簇。简单来说，这就像在超市购物时，顾客会被根据购…...
C语言与ASCII码应用之简单加密
加密是什么？什么是加密通话？用人话说就是一句有含义的话，经过一定的特殊规则把里面的每个字按照这个规则进行改变，但是这个规则只有你和你想让知道这条信息的人知道 今天我们来用ASCII码编写一个简单加密与解密的程序，…...
)
python无需验证码免登录12306抢票 --selenium(2)
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 [TOC](python无需验证码免登录12306抢票 --selenium(2)) 前言 提示：这里可以添加本文要记录的大概内容： 就在刚刚我抢的票：2025年1月8日…...
[论文阅读]Corpus Poisoning via Approximate Greedy Gradient Descent
Corpus Poisoning via Approximate Greedy Gradient Descent [2406.05087] Corpus Poisoning via Approximate Greedy Gradient Descent 基于近似贪婪梯度下降的语料库投毒 面向检索器的攻击 AGGD 通过从所有符元位置中选择排名最高的符元，而不是从单个随机采样…...
C++—9、如何在Microsoft Visual Studio中调试C++
本文通过实例操作来介绍 Visual Studio 调试器的功能。调试器在运行过程中可提供许多方法让你查看代码的情况。 你可以逐步浏览代码、查看变量中存储的值、设置对变量的监视以查看值何时改变、检查代码的执行路径、查看代码分支是否正在运行等等。本实例主要是设置断点及查看内…...
《深度剖析：开源与闭源模型，AI舞台上的不同角色》
在人工智能蓬勃发展的当下，模型的选择如同为一场战役挑选合适的武器，至关重要。开源模型与闭源模型作为AI领域的两大阵营，在性能和应用场景上展现出显著差异，深刻影响着开发者、企业以及整个行业的走向。 性能差异：实…...
开源 vGPU 方案 HAMi 解析
开源 vGPU 方案 HAMi 一、k8s 环境下 GPU 资源管理的现状与问题 （一）资源感知与绑定 在 k8s 中，资源与节点紧密绑定。对于 GPU 资源，我们依赖 NVIDIA 提供的 device-plugin 来进行感知，并将其上报到 kube-apiserver…...
Unity 大地图功能 离线瓦片地图
不使用第二个摄像机实现类似开放世界的大地图功能。 功能如下： 按下M键打开/关闭大地图功能 打开大地图时，默认玩家位置居中 大地图支持拖拽，可调节拖拽速度，支持XY轴翻转 支持大地图设置边缘偏移量 可设置是否启动拖拽边界 …...
【计算机网络】什么是网关（Gateway）？
网上冲浪多了，你可以听到过网关（Gateway）这个词，但是却不太清楚网关（Gateway）到底是干什么的、负责网络当中的什么任务，本篇文字将会为你介绍网关（Gateway）的作用&#x…...
AIOps 平台
AIOps（Artificial Intelligence for IT Operations）平台是一种结合人工智能（AI）技术和IT运营管理的解决方案，旨在通过自动化、智能化的手段优化企业IT系统的运行与管理。以下是AIOps平台的核心功能、优势以及常见的技术…...
使用 SQL 和表格数据进行问答和 RAG（1）—数据库准备
一. 从 .sql/csv/xlsx 文件创建 sqlite 数据库。 要从.sql文件准备 SQL DB，这里会将创建数据库的代码放到了，将文件复制到data/sql目录中，然后在终端中的项目文件夹中执行： pip install sqlite3现在创建一个名为sqldb的数据库&a…...
TCP与UDP协议
一、主要区别 ① 连接的建立和断开： TCP（Transform Control Protocol）通过三次握手来建立一个可靠的连接。这个过程确保了双方都能发送和接收数据。连接建立后，TCP提供稳定的数据传输服务。当通信结束时，TCP通过四次…...
【MySQL】MVCC详解, 图文并茂简单易懂
欢迎来到啊妮莫的学习小屋 祝读本文的朋友都天天开心呀 目录 MVCC简介快照读与当前读快照读当前读 隔离级别隐藏字段和Undo Log版本链✨MVCC原理--ReadView✨ReadView简介设计思路适用隔离级别重要内容 ReadView规则MVCC整体流程 不同隔离级别下的MVCC读已提交可重复读 总结 M…...
Cisco认证是Cisco公司建立的网络技术证书体系
思科认证体系是由Cisco公司建立的分为3个层次的网络技术证书体系，随着Cisco产品线的扩大和市场份额的不断提升，Cisco产品从当初仅有的 Cisco路由器和Cisco交换机发展到现在的6大方向：路由交换，网络设计，网络安全&#…...
Clojure语言的面向对象编程
Clojure语言的面向对象编程 引言 Clojure是一种现代的Lisp方言，它特别强调函数式编程，Immutable数据结构和强大的并发能力。然而，很多人可能会问：Clojure支持面向对象编程吗？虽然Clojure没有像Java或C那样的传统类和…...
React快速上手到项目实战总篇
React核心价值与前置知识 时刻保持对知识的渴望 家人们 开学!!! 核心价值 组件化（易开发易维护） 数据驱动视图 ：定义好数据和ui的显示规则 即UIf(state) 只关注业务数据修改，不在操作DOM 增加开发效率 使用vite创建Recat项目 …...
Dart语言的语法
Dart语言的魅力与应用 引言 随着互联网的发展和移动设备的普及，编程语言层出不穷，各种语言如雨后春笋般被创造出来。其中，Dart语言作为一种现代编程语言，凭借其简洁的语法、强大的功能以及良好的性能，受到了越来越多…...
C++——多态
目录 前言 1. 多态的概念 2. 多态的定义及其实现 2.1 多态的构成条件 2.1.1 实现多态的两个重要条件 2.1.2 虚函数 2.1.3 虚函数的重写/覆盖 2.1.4 多态场景的⼀个选择题 2.1.5 虚函数重写的⼀些其他问题 2.1.5.1 协变（了解） 2.1.5.2 析构函…...
什么是Transformer模型中的KV缓存：上下文新增那之前计算的KV还可用，在原有基础上对新增的进行计算就行
什么是Transformer模型中的KV缓存? 在Transformer模型中，KV缓存（Key-Value Cache）具有重要作用，以下是关于它的详细介绍： 概念含义 KV缓存主要是用于存储在模型推理过程中已经计算过的键（Key）和值（Value）信息。在Transformer架构里，比如在自注意力机制等计算环节…...
12.C语言中的struct详解：定义、赋值、指针、嵌套与位字段
目录 1.简介2.struct 的复制3.struct 指针4.struct 的嵌套5.位字段6.弹性数组成员 1.简介 本篇原文为：C语言中的struct详解：定义、赋值、指针、嵌套与位字段。 更多C进阶、rust、python、逆向等等教程，可点击此链接查看：酷程网 …...
洛谷 P3000 [USACO10DEC] Cow Calisthenics G
思路 题目要求断若干条边后形成的连通块中，最大的直径最小，很明显的二分。关键就在于如何写 c h e c k check check 函数了。 可以用 d f s dfs dfs 来判断要断哪条边。 一、 d [ u ] d[u] d[u] 定义 设 d [ u ] d[u] d[u] 为从 u u u 出发到子树…...
前端拿到zip中所有文件并下载为新的zip文件
问题原因：后端返回了一个zip格式文件供前端下载，然后下载后，形成了zip套zip的形式，当后端不愿处理时，前端不能坐以待毙 PS：当压缩包文件量过大，前端可能会出问题（脑测，未…...
JVM调优
jvm调优步骤：1发现问题、2。定位问题、3.解决问题 jdk自带的命令行调优工具： 1. jps 查看正在运行的 Java 进程 jps -v 查看进程启动时的JVM参数 options 参数： -q：仅仅显示 LVMID（local virtual machine id&#x…...
【前端】【HTML】入门基础知识
参考视频：【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili 一、基本结构 二、基本标签 <h1>：一级标题，通常用于页面的主标题，字体较大且醒目。 <h2>：二级标题，用于副标题或主要章节标…...
Ubuntu桌面管理环境: GDM3，KDM，LightDM
介绍 Ubuntu是一个广受欢迎的Linux操作系统，拥有强大而多样化的桌面管理环境。其中三个常用的桌面管理环境是GDM3，KDM和LightDM。本篇博客将介绍这三个桌面管理环境的特点和功能。 GDM3 (GNOME Display Manager) GDM3是默认的桌面管理环境，…...
每天你好20250110（距离春节19天！！！）
亲爱的朋友们，大家早上好！ 🌞 今晨乃 2025 年 1 月 10 日，星期五，农历乙巳[蛇]年十一月二十一日。祥蛇逸彩送祥，金乌喷薄耀世，晨晖破雾而来，恰似“赤日初升，其道大光”&…...
iOS 本地新项目上传git仓库，并使用sourceTree管理
此文记录的场景描述： iOS前期开发时，在本地创建项目，直至开发一段时间，初期编码及框架已完善后，才拿到git仓库的地址。此时需要将本地代码上传到git仓库。 上传至git仓库，可以使用终端，键入命令…...
计算机网络之---计算机网络的性能评估
计算机网络的性能评估是指通过各种标准和指标来衡量网络的工作效率和质量，进而对网络进行优化和改进的过程。评估的目标是确保网络能够满足预期的服务质量（QoS）和性能需求。常见的计算机网络性能评估指标包括带宽、延迟、吞吐量、丢包率等。 …...
对话｜企业如何构建更完善的容器供应链安全防护体系
对话｜企业如何构建更完善的容器供应链安全防护体系 云布道师 随着云计算和 DevOps 的兴起，容器技术和自动化成为软件开发中的必要手段，软件供应链也进入了自动化及 CI/CD 阶段。然而，容器技术和自动化虽然提升了软件的更新速度&…...
【SpringSecurity】二、自定义页面前后端分离
文章目录 1、用户认证流程AuthenticationSuccessHandler AuthenticationFailureHandlerSecurityFilterChain配置用户认证信息 2、会话并发处理2.1、实现处理器接口2.2、SecurityFilterChain配置 1、用户认证流程 AuthenticationSuccessHandler AuthenticationFailureHandler …...